diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js
new file mode 100644
index 00000000..e4720921
--- /dev/null
+++ b/src/components/PetAvatar/index.js
@@ -0,0 +1,47 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+import { routeLocation } from 'vanilla-routing';
+
+const events = ['active'];
+
+const html = `
+
+ ![]()
+
+
+`;
+
+export default function PetAvatar({ id, title, imgSrc, imgAlt } = {}) {
+ Component.call(this, { html, events });
+
+ if (id) this.setHref(id);
+ if (title) this.setTitle(title);
+ if (imgSrc) this.setImgSrc(imgSrc);
+ if (imgAlt) this.setImgAlt(imgAlt);
+
+ if (routeLocation().pathname === `/petperfil/${id}`) {
+ this.activate();
+ }
+}
+
+PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, {
+ setTitle(text) {
+ this.selected.get('pet-title').textContent = text;
+ },
+ setImgSrc(src) {
+ this.selected.get('pet-image').src = src;
+ },
+ setImgAlt(alt) {
+ this.selected.get('pet-image').alt = alt;
+ },
+ setHref(id) {
+ this.selected.get('pet-avatar').href += id;
+ },
+ activate() {
+ const image = this.selected.get('pet-image');
+ const title = this.selected.get('pet-title');
+ image.classList.add('pet-avatar__img--active');
+ title.classList.add('pet-avatar__title--active');
+ this.emit('active');
+ },
+});
diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss
new file mode 100644
index 00000000..3b83c8eb
--- /dev/null
+++ b/src/components/PetAvatar/index.scss
@@ -0,0 +1,54 @@
+@use '~styles/colors' as colors;
+@use '~styles/fonts' as fonts;
+
+.pet-avatar {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ align-items: center;
+
+ text-decoration: none;
+ aspect-ratio: 1/1;
+
+ opacity: 0.85;
+
+ transition: 0.3s ease-in-out;
+
+ &__img {
+ height: 100%;
+
+ outline: 0.15rem solid colors.$gray500;
+
+ border-radius: 50%;
+ object-fit: cover;
+ aspect-ratio: 1/1;
+
+ transition: 0.3s ease-in-out;
+
+ &--active {
+ outline: 0.3rem solid colors.$primary200;
+ }
+ }
+
+ &__title {
+ font-family: fonts.$fourthFont;
+
+ color: colors.$gray200;
+ text-align: center;
+ font-size: 1.4rem;
+ font-weight: fonts.$regular;
+
+ transition: 0.3s ease-in-out;
+
+ &--active {
+ color: colors.$primary200;
+ font-weight: fonts.$semiBold;
+ }
+ }
+
+ &:hover {
+ transform: scale(1.02);
+ opacity: 1;
+ }
+}
diff --git a/src/layouts/app/components/SideMenu/index.js b/src/layouts/app/components/SideMenu/index.js
index d4407b25..8cca34fd 100644
--- a/src/layouts/app/components/SideMenu/index.js
+++ b/src/layouts/app/components/SideMenu/index.js
@@ -9,6 +9,7 @@ import meusPets from './images/meuspets.svg';
import notificacoes from './images/notifications.svg';
import perfil from './images/perfil.svg';
import petdex from './images/petdex.svg';
+import PetAvatar from '../../../../components/PetAvatar';
import './index.scss';
const html = `
@@ -27,6 +28,7 @@ const html = `