diff --git a/components/SideBar.vue b/components/SideBar.vue
index d9f30fa..931fe95 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="side-bar">
     <v-navigation-drawer
       :value="openDrawer"
       :width="sideBarWidth"
@@ -93,6 +93,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.side-bar{
+  z-index: 5;
+}
+
 .title-container {
   display: flex;
   justify-content: center;
diff --git a/components/__tests__/__snapshots__/SideBar.test.js.snap b/components/__tests__/__snapshots__/SideBar.test.js.snap
deleted file mode 100644
index d24b649..0000000
--- a/components/__tests__/__snapshots__/SideBar.test.js.snap
+++ /dev/null
@@ -1,578 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Components / Sidebar when component renders when is desktop should render 300 1`] = `
-<div
-  class="v-sheet theme--light"
->
-  <div
-    class="v-overlay v-overlay--absolute theme--dark"
-    style="z-index: 5;"
-  >
-    <div
-      class="v-overlay__scrim"
-      style="opacity: 0; background-color: rgb(33, 33, 33); border-color: #212121;"
-    />
-  </div>
-  <aside
-    class="v-navigation-drawer v-navigation-drawer--absolute v-navigation-drawer--is-mobile v-navigation-drawer--open v-navigation-drawer--right theme--light"
-    style="height: 100%; top: 0px; transform: translateX(0%); width: 300px;"
-  >
-    <div
-      class="v-navigation-drawer__content"
-    >
-      <div
-        class="title-container"
-      >
-        <i
-          aria-hidden="true"
-          class="v-icon notranslate title-navigation mdi mdi-bus theme--light primary--text"
-        />
-         
-        <div
-          class="v-list-item__title title-navigation"
-        >
-          
-        EMTU
-      
-        </div>
-         
-        <button
-          class="v-icon notranslate title-navigation v-icon--link mdi mdi-close theme--light primary--text"
-          type="button"
-        />
-      </div>
-       
-      <div
-        class="v-list v-sheet theme--light v-list--dense"
-        role="list"
-      >
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-magnify theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Buscar
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-format-list-numbered theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Lista de CID's
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-account-group theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Sobre nós
-            </span>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="v-navigation-drawer__border"
-    />
-  </aside>
-</div>
-`;
-
-exports[`Components / Sidebar when component renders when is mobile should render 100% 1`] = `
-<div
-  class="v-sheet theme--light"
->
-  <div
-    class="v-overlay v-overlay--absolute theme--dark"
-    style="z-index: 5;"
-  >
-    <div
-      class="v-overlay__scrim"
-      style="opacity: 0; background-color: rgb(33, 33, 33); border-color: #212121;"
-    />
-  </div>
-  <aside
-    class="v-navigation-drawer v-navigation-drawer--absolute v-navigation-drawer--is-mobile v-navigation-drawer--open v-navigation-drawer--right theme--light"
-    style="height: 100%; top: 0px; transform: translateX(0%); width: 100%;"
-  >
-    <div
-      class="v-navigation-drawer__content"
-    >
-      <div
-        class="title-container"
-      >
-        <i
-          aria-hidden="true"
-          class="v-icon notranslate title-navigation mdi mdi-bus theme--light primary--text"
-        />
-         
-        <div
-          class="v-list-item__title title-navigation"
-        >
-          
-        EMTU
-      
-        </div>
-         
-        <button
-          class="v-icon notranslate title-navigation v-icon--link mdi mdi-close theme--light primary--text"
-          type="button"
-        />
-      </div>
-       
-      <div
-        class="v-list v-sheet theme--light v-list--dense"
-        role="list"
-      >
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-magnify theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Buscar
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-format-list-numbered theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Lista de CID's
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-account-group theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Sobre nós
-            </span>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="v-navigation-drawer__border"
-    />
-  </aside>
-</div>
-`;
-
-exports[`Components / Sidebar when is not logged should render default items 1`] = `
-<div
-  class="v-sheet theme--light"
->
-  <aside
-    class="v-navigation-drawer v-navigation-drawer--absolute v-navigation-drawer--is-mobile v-navigation-drawer--open v-navigation-drawer--right theme--light"
-    style="height: 100%; top: 0px; transform: translateX(0%); width: 100%;"
-  >
-    <div
-      class="v-navigation-drawer__content"
-    >
-      <div
-        class="title-container"
-      >
-        <i
-          aria-hidden="true"
-          class="v-icon notranslate title-navigation mdi mdi-bus theme--light primary--text"
-        />
-         
-        <div
-          class="v-list-item__title title-navigation"
-        >
-          
-        EMTU
-      
-        </div>
-         
-        <button
-          class="v-icon notranslate title-navigation v-icon--link mdi mdi-close theme--light primary--text"
-          type="button"
-        />
-      </div>
-       
-      <div
-        class="v-list v-sheet theme--light v-list--dense"
-        role="list"
-      >
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-magnify theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Buscar
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-format-list-numbered theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Lista de CID's
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate mdi mdi-account-group theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Sobre nós
-            </span>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="v-navigation-drawer__border"
-    />
-  </aside>
-</div>
-`;
-
-exports[`Components / Sidebar when user is logged should render admin items 1`] = `
-<div
-  class="v-sheet theme--light"
->
-  <aside
-    class="v-navigation-drawer v-navigation-drawer--absolute v-navigation-drawer--is-mobile v-navigation-drawer--open v-navigation-drawer--right theme--light"
-    style="height: 100%; top: 0px; transform: translateX(0%); width: 100%;"
-  >
-    <div
-      class="v-navigation-drawer__content"
-    >
-      <div
-        class="title-container"
-      >
-        <i
-          aria-hidden="true"
-          class="v-icon notranslate title-navigation mdi mdi-bus theme--light primary--text"
-        />
-         
-        <div
-          class="v-list-item__title title-navigation"
-        >
-          
-        EMTU
-      
-        </div>
-         
-        <button
-          class="v-icon notranslate title-navigation v-icon--link mdi mdi-close theme--light primary--text"
-          type="button"
-        />
-      </div>
-       
-      <div
-        class="v-list v-sheet theme--light v-list--dense"
-        role="list"
-      >
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate material-icons theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Home
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate material-icons theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Buscas realizadas
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate material-icons theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Acessos diários
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate material-icons theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Ranking de Linhas
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate material-icons theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Solicitações
-            </span>
-          </div>
-        </a>
-        <a
-          class="v-list-item v-list-item--link theme--light"
-          role="listitem"
-          router=""
-          tabindex="0"
-        >
-          <div
-            class="v-list-item__icon"
-          >
-            <i
-              aria-hidden="true"
-              class="v-icon notranslate material-icons theme--light"
-            />
-          </div>
-           
-          <div
-            class="v-list-item__content"
-          >
-            <span
-              class="item-title"
-            >
-              Fazer uma busca
-            </span>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="v-navigation-drawer__border"
-    />
-  </aside>
-</div>
-`;
diff --git a/pages/lista-cids.vue b/pages/lista-cids.vue
index ee33328..7337fe4 100644
--- a/pages/lista-cids.vue
+++ b/pages/lista-cids.vue
@@ -1,102 +1,115 @@
 <template>
   <div class="container">
-    <ul class="filters">
-      <v-text-field
-        v-model="search.text"
-        label="Pesquisar"
-        placeholder="Pesquisar"
-        solo
-        dense
-        class="input"
-      />
-      <v-select
-        v-model="search.companion"
-        :items="['Sim', 'Não']"
-        label="Acompanhante"
-        solo
-        dense
-        class="input"
-        clearable
-      />
-      <v-select
-        v-model="search.group"
-        :items="['G1', 'G2', 'G3']"
-        label="Grupo"
-        solo
-        dense
-        class="input"
-        clearable
-      />
-      <v-btn class="button" color="primary">
-        Buscar
-      </v-btn>
-      <v-btn class="button group-button" @click="dialog = true">
-        O que são os grupos?
-      </v-btn>
-      <v-dialog v-model="dialog" class="v-dialog" max-width="80vw">
-        <v-card>
-          <v-card-title class="headline" />
-          <v-card-text>
-            <div class="dialog-container">
-              <v-card class="dialog-card">
-                <v-card-title class="dialog-title">
-                  <v-icon class="dialog-icon">
-                    mdi-wheelchair-accessibility
-                  </v-icon>
-                  G1
-                </v-card-title>
-                <v-card-text class="dialog-text">
-                  Pessoas com deficiência que necessitam de um alto nível de acessibilidade, por exemplo, a utilização de elevador.
-                </v-card-text>
-              </v-card>
-              <v-card class="dialog-card">
-                <v-card-title class="dialog-title">
-                  <v-icon class="dialog-icon">
-                    mdi-human-white-cane
-                  </v-icon>
-                  G2
-                </v-card-title>
-                <v-card-text class="dialog-text">
-                  Pessoas com necessidades de acessibilidade que não tenham interferência direta no ônibus, por exemplo, a presença de piso tátil.
-                </v-card-text>
-              </v-card>
-              <v-card class="dialog-card">
-                <v-card-title class="dialog-title">
-                  <v-icon class="dialog-icon">
-                    mdi-human-male
-                  </v-icon>
-                  G3
-                </v-card-title>
-                <v-card-text class="dialog-text">
-                  Pessoas que não necessitam de adaptações no ônibus para seu deslocamento de forma segura.
+    <div class="table-container">
+      <v-card class="table-card">
+        <div class="upper-container">
+          <v-card-title class="table-card-title">
+            Lista de CIDs
+          </v-card-title>
+          <v-spacer></v-spacer>
+          <v-text-field
+            v-model="search.text"
+            append-icon="mdi-magnify"
+            label="Pesquisar"
+            single-line
+            class="table-search"
+          >
+          </v-text-field>
+          <ul class="filters">
+            <v-select
+              v-model="search.companion"
+              :items="['Sim', 'Não']"
+              label="Acompanhante"
+              solo
+              dense
+              class="input"
+              clearable
+            />
+            <v-select
+              v-model="search.group"
+              :items="['G1', 'G2', 'G3']"
+              label="Grupo"
+              solo
+              dense
+              class="input"
+              clearable
+            />
+            <v-btn class="button group-button" @click="dialog = true">
+              O que são os grupos?
+            </v-btn>
+            <v-dialog v-model="dialog" class="v-dialog" max-width="80vw">
+              <v-card>
+                <v-card-title class="headline" />
+                <v-card-text>
+                  <div class="dialog-container">
+                    <v-card class="dialog-card">
+                      <v-card-title class="dialog-title">
+                        <v-icon class="dialog-icon">
+                          mdi-wheelchair-accessibility
+                        </v-icon>
+                        G1
+                      </v-card-title>
+                      <v-card-text class="dialog-text">
+                        Pessoas com deficiência que necessitam de um alto nível de acessibilidade, por exemplo, a utilização de elevador.
+                      </v-card-text>
+                    </v-card>
+                    <v-card class="dialog-card">
+                      <v-card-title class="dialog-title">
+                        <v-icon class="dialog-icon">
+                          mdi-human-white-cane
+                        </v-icon>
+                        G2
+                      </v-card-title>
+                      <v-card-text class="dialog-text">
+                        Pessoas com necessidades de acessibilidade que não tenham interferência direta no ônibus, por exemplo, a presença de piso tátil.
+                      </v-card-text>
+                    </v-card>
+                    <v-card class="dialog-card">
+                      <v-card-title class="dialog-title">
+                        <v-icon class="dialog-icon">
+                          mdi-human-male
+                        </v-icon>
+                        G3
+                      </v-card-title>
+                      <v-card-text class="dialog-text">
+                        Pessoas que não necessitam de adaptações no ônibus para seu deslocamento de forma segura.
+                      </v-card-text>
+                    </v-card>
+                  </div>
                 </v-card-text>
+                <v-card-actions>
+                  <v-btn color="primary" class="ml-auto" @click="dialog = false">
+                    Fechar
+                  </v-btn>
+                </v-card-actions>
               </v-card>
-            </div>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn color="primary" class="ml-auto" @click="dialog = false">
-              Fechar
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </ul>
-    <v-alert v-if="errorMessage" type="error" class="error-message">
-      {{ errorMessage }}
-    </v-alert>
-    <div class="table-container">
-      <v-data-table
-        :headers="headers"
-        :items="filteredCids"
-        :items-per-page="5"
-        class="elevation-1 table"
-        dense
-        fixed-header
-      />
+            </v-dialog>
+          </ul>
+          <v-alert v-if="errorMessage" type="error" class="error-message">
+            {{ errorMessage }}
+          </v-alert>
+        </div>
+        <v-data-table
+          :headers="headers"
+          :items="filteredCids"
+          :items-per-page="5"
+          class="elevation-1 table"
+          fixed-header
+        >
+          <template #[`item.group`]="{ item }">
+            <v-chip
+              :color="getColor(item.group)"
+              dark
+            >
+              {{ item.group }}
+            </v-chip>
+          </template>
+        </v-data-table>
+      </v-card>
     </div>
   </div>
 </template>
-<!--Companhia -> Acompanhante-->
+
 <script>
 import axiosClient from '~/assets/services/emtu-api'
 
@@ -108,12 +121,13 @@ export default {
         companion: null,
         group: null
       },
+      slugifiedText: '',
       headers: [
-        { text: 'Código', value: 'cod', align: 'start' },
-        { text: 'Diagnóstico', value: 'diagnostic', align: 'start' },
-        { text: 'Observações', value: 'observations', align: 'start' },
-        { text: 'Acompanhante', value: 'companion', align: 'start' },
-        { text: 'Grupo', value: 'group', align: 'start' }
+        { text: 'Código', align: 'start', value: 'cod' },
+        { text: 'Diagnóstico', align: 'start', value: 'diagnostic' },
+        { text: 'Observações', align: 'start', value: 'observations' },
+        { text: 'Direito a Acompanhante', align: 'start', value: 'companion' },
+        { text: 'Grupo', align: 'center', value: 'group' }
       ],
       cids: [],
       dialog: false,
@@ -122,20 +136,24 @@ export default {
   },
   computed: {
     filteredCids () {
-      if (!this.search.text && !this.search.companion && !this.search.group) {
+      if (!this.slugifiedText && !this.search.companion && !this.search.group) {
         return this.cids
       }
       return this.cids.filter((item) => {
-        return ((item.cod && item.cod.toLowerCase().includes(this.search.text.toLowerCase())) ||
-        (item.diagnostic && item.diagnostic.toLowerCase().includes(this.search.text.toLowerCase())) ||
-        (item.observations && item.observations.toLowerCase().includes(this.search.text.toLowerCase())) ||
-        (item.companion && item.companion.toLowerCase().includes(this.search.text.toLowerCase())) ||
-        (item.group && item.group.toLowerCase().includes(this.search.text.toLowerCase()))) &&
+        return ((item.cod && item.cod.toLowerCase().includes(this.slugifiedText.toLowerCase())) ||
+        (item.diagnostic && item.diagnostic.toLowerCase().includes(this.slugifiedText.toLowerCase())) ||
+        (item.slugdiagnostic && item.slugdiagnostic.toLowerCase().includes(this.slugifiedText.toLowerCase()))) &&
         (!this.search.group || (item.group && item.group.toLowerCase().includes(this.search.group.toLowerCase()))) &&
         (!this.search.companion || (item.companion && item.companion.toLowerCase().includes(this.search.companion.toLowerCase())))
       })
     }
   },
+  watch: {
+    'search.text' (newText) {
+      this.slugifiedText = this.slugify(newText)
+      console.log(this.slugifiedText)
+    }
+  },
   created () {
     axiosClient.get('/cids')
       .then((response) => {
@@ -145,6 +163,34 @@ export default {
       .catch(() => {
         this.errorMessage = 'Ocorreu um erro ao buscar os CIDs.'
       })
+  },
+  methods: {
+    getColor (group) {
+      if (group === 'G1') {
+        return 'red'
+      } else if (group === 'G2') {
+        return 'orange'
+      } else {
+        return 'blue'
+      }
+    },
+    slugify (text) {
+      const original = 'áàãâäéèêëíìîïóòõôöúùûüçñ'
+      const newFormat = 'aaaaaeeeeiiiiooooouuuucn'
+
+      return text
+        .toString()
+        .toLowerCase()
+        .trim()
+        .split('')
+        .map((char) => {
+          const index = original.indexOf(char)
+          return index !== -1 ? newFormat[index] : char
+        })
+        .join('')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+    }
   }
 }
 </script>
@@ -160,7 +206,8 @@ export default {
 
 .filters {
   display: flex;
-  width: fit-content;
+  width: 100%;
+  margin: 0 1.5em 0 1.5em;
   padding: 0;
 }
 
@@ -169,16 +216,16 @@ export default {
   height: 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .input {
   padding: 0 15px 0 0;
-  margin: 0 0 0 0.25em;
   min-width: 40px;
 }
 
 .button{
-  margin: 0 15px 0 0;
+  margin: 0 0 0 1.5em;
 }
 
 .v-dialog{
@@ -213,14 +260,32 @@ export default {
   font-size: 3em;
 }
 
-.table {
-  width: 75%;
-  height: min-content;
-  margin: auto;
+.table-card {
+  width: 85%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.upper-container{
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
 }
 
-.v-data-table-header {
-  text-align: left;
+.table-card-title {
+  padding-left: 1.5em;
+}
+
+.table-search {
+  margin-right: 1.5em;
+}
+
+.table {
+  width: 100%;
+  height: min-content;
+  margin: 0 1.5em 1.5em 1.5em;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
 }
 
 .error-message {
@@ -228,18 +293,26 @@ export default {
   width: 60%;
 }
 
+@media (max-width: 1000px) and (min-width: 601px){
+  .table-card {
+    width: 100%;
+  }
+}
+
 @media (max-width: 600px) {
   .filters {
     flex-wrap: wrap;
+    margin: 0;
   }
   .input{
     padding: 0;
+    margin: 0 1.5em;
   }
   .button{
-    margin: 0 0 1em 0.25em;
+    margin: 0 1.5em;
   }
   .group-button{
-    margin: 0em 0em 1em 0.25em;
+    margin: 0em 1.75em 1em 1.75em;
   }
   .v-dialog{
     max-width: 85vw !important;
@@ -252,7 +325,10 @@ export default {
     width: 100%;
     margin: 0.5em 0;
   }
-  .table {
+  .table-search{
+    margin-left: 1.75em;
+  }
+  .table-card {
     width: 100%;
   }
   .error-message {
@@ -260,3 +336,67 @@ export default {
   }
 }
 </style>
+
+<!-- <div class="table-container">
+  <v-data-table
+    :headers="headers"
+    :items="filteredCids"
+    :items-per-page="5"
+    class="elevation-1 table"
+    dense
+    fixed-header
+  />
+</div>
+</div>
+</template>
+<script>
+import axiosClient from '~/assets/services/emtu-api'
+
+export default {
+data () {
+return {
+  search: {
+    text: '',
+    companion: null,
+    group: null
+  },
+  headers: [
+    { text: 'Código', value: 'cod', align: 'start' },
+    { text: 'Diagnóstico', value: 'diagnostic', align: 'start' },
+    { text: 'Observações', value: 'observations', align: 'start' },
+    { text: 'Acompanhante', value: 'companion', align: 'start' },
+    { text: 'Grupo', value: 'group', align: 'start' }
+  ],
+  cids: [],
+  dialog: false,
+  errorMessage: null
+}
+},
+computed: {
+filteredCids () {
+  if (!this.search.text && !this.search.companion && !this.search.group) {
+    return this.cids
+  }
+  return this.cids.filter((item) => {
+    return ((item.cod && item.cod.toLowerCase().includes(this.search.text.toLowerCase())) ||
+    (item.diagnostic && item.diagnostic.toLowerCase().includes(this.search.text.toLowerCase())) ||
+    (item.observations && item.observations.toLowerCase().includes(this.search.text.toLowerCase())) ||
+    (item.companion && item.companion.toLowerCase().includes(this.search.text.toLowerCase())) ||
+    (item.group && item.group.toLowerCase().includes(this.search.text.toLowerCase()))) &&
+    (!this.search.group || (item.group && item.group.toLowerCase().includes(this.search.group.toLowerCase()))) &&
+    (!this.search.companion || (item.companion && item.companion.toLowerCase().includes(this.search.companion.toLowerCase())))
+  })
+}
+},
+created () {
+axiosClient.get('/cids')
+  .then((response) => {
+    this.cids = response.data
+    this.errorMessage = null
+  })
+  .catch(() => {
+    this.errorMessage = 'Ocorreu um erro ao buscar os CIDs.'
+  })
+}
+}
+</script> -->