diff --git a/web/src/components/PrinterCard.vue b/web/src/components/PrinterCard.vue
index c6ce728..941b24d 100644
--- a/web/src/components/PrinterCard.vue
+++ b/web/src/components/PrinterCard.vue
@@ -57,128 +57,37 @@
           </v-list-item>
         </v-list>
       </v-col>
-      <v-col cols="12" sm="6" align-self="center">
-        <v-list density="compact">
-          <v-list-item>
-            <v-list-item-title>
-              <v-progress-linear
-                :title="`${printer.status[0].tonerBlackLevel}%`"
-                class="mb-1"
-                height="6"
-                color="black"
-                :model-value="printer.status[0].tonerBlackLevel"
-              ></v-progress-linear>
-            </v-list-item-title>
-            <v-list-item-subtitle>
-              {{ printer.blackTonerModel }}
-
-              <v-chip
-                size="x-small"
-                title="Nível do toner"
-                variant="tonal"
-                :color="
-                  printer.status[0].tonerBlackLevel < 10
-                    ? 'error'
-                    : printer.status[0].tonerBlackLevel < 20
-                    ? 'warning'
-                    : ''
-                "
-              >
-                {{ printer.status[0].tonerBlackLevel }}%
-              </v-chip>
-            </v-list-item-subtitle>
-          </v-list-item>
-          <v-list-item v-if="printer.status[0].tonerCyanLevel">
-            <v-list-item-title>
-              <v-progress-linear
-                :title="`${printer.status[0].tonerCyanLevel}%`"
-                class="mb-1"
-                height="6"
-                :model-value="printer.status[0].tonerCyanLevel"
-                color="cyan"
-              />
-            </v-list-item-title>
-            <v-list-item-subtitle>
-              {{ printer.cyanTonerModel }}
-              <v-chip
-                size="x-small"
-                title="Nível do toner"
-                variant="tonal"
-                :color="
-                  printer.status[0].tonerCyanLevel < 10
-                    ? 'error'
-                    : printer.status[0].tonerCyanLevel < 20
-                    ? 'warning'
-                    : ''
-                "
-              >
-                {{ printer.status[0].tonerCyanLevel }}%
-              </v-chip>
-            </v-list-item-subtitle>
-          </v-list-item>
-          <v-list-item v-if="printer.status[0].tonerMagentaLevel">
-            <v-list-item-title>
-              <v-progress-linear
-                :title="`${printer.status[0].tonerMagentaLevel}%`"
-                class="mb-1"
-                height="6"
-                :model-value="printer.status[0].tonerMagentaLevel"
-                color="pink"
-              />
-            </v-list-item-title>
-            <v-list-item-subtitle>
-              {{ printer.magentaTonerModel }}
-              <v-chip
-                size="x-small"
-                title="Nível do toner"
-                variant="tonal"
-                :color="
-                  printer.status[0].tonerMagentaLevel < 10
-                    ? 'error'
-                    : printer.status[0].tonerMagentaLevel < 20
-                    ? 'warning'
-                    : ''
-                "
-              >
-                {{ printer.status[0].tonerMagentaLevel }}%
-              </v-chip>
-            </v-list-item-subtitle>
-          </v-list-item>
-          <v-list-item v-if="printer.status[0].tonerYellowLevel">
-            <v-list-item-title>
-              <v-progress-linear
-                :title="`${printer.status[0].tonerYellowLevel}%`"
-                class="mb-1"
-                height="6"
-                :model-value="printer.status[0].tonerYellowLevel"
-                color="yellow darken-3"
-              />
-            </v-list-item-title>
-            <v-list-item-subtitle>
-              {{ printer.yellowTonerModel }}
-              <v-chip
-                size="x-small"
-                title="Nível do toner"
-                variant="tonal"
-                :color="
-                  printer.status[0].tonerYellowLevel < 10
-                    ? 'error'
-                    : printer.status[0].tonerYellowLevel < 20
-                    ? 'warning'
-                    : ''
-                "
-              >
-                {{ printer.status[0].tonerYellowLevel }}%
-              </v-chip>
-            </v-list-item-subtitle>
-          </v-list-item>
-        </v-list>
+      <v-col cols="12" sm="6" align-self="center" class="pa-4">
+        <toner-level-bar
+          :level="printer.status[0].tonerBlackLevel"
+          :model="printer.blackTonerModel"
+          color="black"
+        />
+        <toner-level-bar
+          v-if="printer.status[0].tonerCyanLevel"
+          :level="printer.status[0].tonerCyanLevel"
+          :model="printer.cyanTonerModel"
+          color="cyan"
+        />
+        <toner-level-bar
+          v-if="printer.status[0].tonerMagentaLevel"
+          :level="printer.status[0].tonerMagentaLevel"
+          :model="printer.magentaTonerModel"
+          color="magenta"
+        />
+        <toner-level-bar
+          v-if="printer.status[0].tonerYellowLevel"
+          :level="printer.status[0].tonerYellowLevel"
+          :model="printer.yellowTonerModel"
+          color="yellow"
+        />
       </v-col>
     </v-row>
   </v-card>
 </template>
 <script lang="ts" setup>
 import PrinterImg from '@/components/PrinterImg.vue'
+import TonerLevelBar from '@/components/TonerLevelBar.vue'
 
 import { computed } from 'vue'
 
diff --git a/web/src/components/TonerLevelBar.vue b/web/src/components/TonerLevelBar.vue
new file mode 100644
index 0000000..a155f22
--- /dev/null
+++ b/web/src/components/TonerLevelBar.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="mb-1">
+    <div class="d-flex">
+      <div class="flex-grow-1 align-self-center">
+        <v-progress-linear
+          :title="`${level}%`"
+          :height="8"
+          :color="bgColor"
+          :model-value="level"
+        />
+      </div>
+      <div class="align-self-center">
+        <v-chip
+          size="x-small"
+          class="justify-center align-self-center ml-1"
+          style="width: 32px"
+          :color="level < 10 ? 'error' : level < 20 ? 'waring' : 'grey'"
+          variant="text"
+        >
+          {{ level }}%
+        </v-chip>
+      </div>
+    </div>
+    <span class="text-grey-darken-1">
+      {{ model }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  level: number
+  color: 'black' | 'cyan' | 'magenta' | 'yellow'
+  model: string
+}>()
+
+const bgColor = computed(() => {
+  switch (props.color) {
+    case 'cyan':
+      return 'cyan'
+    case 'magenta':
+      return 'pink'
+    case 'yellow':
+      return 'yellow-darken-1'
+    default:
+      return 'black'
+  }
+})
+</script>