diff --git a/src/components/AvatarButton/index.scss b/src/components/AvatarButton/index.scss
index 6d78ea81..3b3406c5 100644
--- a/src/components/AvatarButton/index.scss
+++ b/src/components/AvatarButton/index.scss
@@ -1,64 +1,64 @@
-@use '~styles/colors' as colors;
-@use '~styles/fonts' as fonts;
-
-.avatar-button {
-  display: flex;
-
-  &__container {
-    display: flex;
-    flex-direction: column;
-    gap: 0.8rem;
-
-    align-items: center;
-
-    text-decoration: none;
-
-    &:hover {
-      .avatar-button__bg {
-        border: 0.15rem solid colors.$grey900;
-
-        background: colors.$appContentColor;
-      }
-
-      .avatar-button__cross {
-        filter: invert(1);
-      }
-
-      .avatar-button__text {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  &__bg {
-    width: 3rem;
-    height: 3rem;
-
-    display: flex;
-
-    align-items: center;
-    justify-content: center;
-
-    padding: 1.8rem;
-    border: 0.15rem solid colors.$appContentColor;
-
-    background: colors.$grey900;
-    border-radius: 8rem;
-
-    transition: 0.6s;
-  }
-
-  &__cross {
-    filter: invert(0);
-
-    transition: 0.6s;
-  }
-
-  &__text {
-    font-family: fonts.$primaryFont;
-    color: colors.$appContentColor;
-    font-size: 1.4rem;
-
-    transition: 0.6s;
-  }
-}
+@use '~styles/colors' as colors;
+@use '~styles/fonts' as fonts;
+
+.avatar-button {
+  display: flex;
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+
+    align-items: center;
+
+    text-decoration: none;
+
+    &:hover {
+      .avatar-button__bg {
+        border: 0.15rem solid colors.$gray900;
+
+        background: colors.$secondary100;
+      }
+
+      .avatar-button__cross {
+        filter: invert(1);
+      }
+
+      .avatar-button__text {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  &__bg {
+    width: 3rem;
+    height: 3rem;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    padding: 1.8rem;
+    border: 0.15rem solid colors.$secondary100;
+
+    background: colors.$gray900;
+    border-radius: 8rem;
+
+    transition: 0.6s;
+  }
+
+  &__cross {
+    filter: invert(0);
+
+    transition: 0.6s;
+  }
+
+  &__text {
+    font-family: fonts.$primaryFont;
+    color: colors.$secondary100;
+    font-size: 1.4rem;
+
+    transition: 0.6s;
+  }
+}
diff --git a/src/components/Button/index.scss b/src/components/Button/index.scss
index 5ef4a5d5..61d804ba 100644
--- a/src/components/Button/index.scss
+++ b/src/components/Button/index.scss
@@ -1,34 +1,36 @@
-@use '~styles/colors.scss' as colors;
-
-.button {
-  font-family: 'Noto Sans', sans-serif;
-  color: rgb(255, 255, 255);
-  font-size: 1.6rem;
-  font-weight: 500;
-
-  padding: 1.6rem;
-  border: unset;
-
-  background-color: colors.$blue500;
-  border-radius: 1.4rem;
-
-  transition: 0.3s ease-in-out;
-
-  cursor: pointer;
-  appearance: none;
-
-  &--block {
-    width: 100%;
-    display: block;
-  }
-
-  &:hover:not(:disabled) {
-    background: colors.$appColor;
-    transform: scale(1.02);
-  }
-
-  &:disabled {
-    background: colors.$gray600;
-    cursor: not-allowed;
-  }
-}
+@use '~styles/colors.scss' as colors;
+
+.button {
+  font-family: 'Noto Sans', sans-serif;
+  color: rgb(255, 255, 255);
+  font-size: 1.6rem;
+  font-weight: 500;
+
+  padding: 1.6rem;
+  border: unset;
+
+  background-color: colors.$primary200;
+  border-radius: 1.4rem;
+
+  transition: 0.3s ease-in-out;
+
+  cursor: pointer;
+  appearance: none;
+
+  &--block {
+    width: 100%;
+
+    display: block;
+  }
+
+  &:hover:not(:disabled) {
+    background: colors.$primary600;
+    transform: scale(1.02);
+  }
+
+  &:disabled {
+    background: colors.$gray600;
+
+    cursor: not-allowed;
+  }
+}
diff --git a/src/components/Checkbox/index.scss b/src/components/Checkbox/index.scss
index 6dca07aa..ac7a341e 100644
--- a/src/components/Checkbox/index.scss
+++ b/src/components/Checkbox/index.scss
@@ -1,48 +1,48 @@
-@use '~styles/colors.scss' as colors;
-@use '~styles/fonts.scss' as fonts;
-
-.checkbox-container {
-  display: inline-flex;
-
-  align-items: center;
-
-  margin: 1rem;
-
-  cursor: pointer;
-
-  &__input {
-    width: 2.2rem;
-    height: 2.2rem;
-
-    margin: 0.8rem;
-    border: 0.2rem solid colors.$gray500;
-
-    border-radius: 0.5rem;
-
-    cursor: pointer;
-    appearance: none;
-
-    &:checked {
-      border-color: colors.$purple500;
-
-      background: colors.$purple500 url('./images/check.svg') no-repeat center
-        center/70%;
-    }
-
-    &:disabled {
-      border-color: colors.$gray500;
-
-      cursor: not-allowed;
-    }
-  }
-
-  &__checkboxText {
-    font-family: fonts.$primaryFont;
-    color: colors.$gray800;
-    text-align: left;
-    font-size: fonts.$xs;
-    font-weight: fonts.$semiBold;
-    line-height: 2;
-    letter-spacing: 0;
-  }
-}
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.checkbox-container {
+  display: inline-flex;
+
+  align-items: center;
+
+  margin: 1rem;
+
+  cursor: pointer;
+
+  &__input {
+    width: 2.2rem;
+    height: 2.2rem;
+
+    margin: 0.8rem;
+    border: 0.2rem solid colors.$gray500;
+
+    border-radius: 0.5rem;
+
+    cursor: pointer;
+    appearance: none;
+
+    &:checked {
+      border-color: colors.$primary500;
+
+      background: colors.$primary500 url('./images/check.svg') no-repeat center
+        center/70%;
+    }
+
+    &:disabled {
+      border-color: colors.$gray500;
+
+      cursor: not-allowed;
+    }
+  }
+
+  &__checkboxText {
+    font-family: fonts.$primaryFont;
+    color: colors.$gray800;
+    text-align: left;
+    font-size: fonts.$xs;
+    font-weight: fonts.$semiBold;
+    line-height: 2;
+    letter-spacing: 0;
+  }
+}
diff --git a/src/components/Dropdown/components/DropdownItem/index.scss b/src/components/Dropdown/components/DropdownItem/index.scss
index a92f6b5c..b42c02c4 100644
--- a/src/components/Dropdown/components/DropdownItem/index.scss
+++ b/src/components/Dropdown/components/DropdownItem/index.scss
@@ -4,7 +4,7 @@
   padding: 0.3rem;
 
   &:hover {
-    background-color: colors.$blue500;
+    background-color: colors.$primary200;
   }
 
   &[data-selected='true'] {
diff --git a/src/components/ProgressBar/index.scss b/src/components/ProgressBar/index.scss
index fb8c0e25..0bf32e04 100644
--- a/src/components/ProgressBar/index.scss
+++ b/src/components/ProgressBar/index.scss
@@ -1,37 +1,37 @@
-@use '~styles/colors.scss' as colors;
-
-.progress-bar {
-  width: 100%;
-
-  display: grid;
-
-  &__background {
-    width: 100%;
-    height: 50%;
-
-    grid-row: 1;
-    grid-column: 1;
-
-    position: relative;
-    top: 25%;
-    z-index: 0;
-
-    background-color: colors.$grey150;
-    border-radius: 100000px;
-  }
-
-  &__foreground {
-    height: 6px;
-
-    grid-row: 1;
-    grid-column: 1;
-
-    position: relative;
-    z-index: 1;
-
-    background-color: colors.$yellow500;
-    border-radius: 100000px;
-
-    transition: width 1s ease-in-out;
-  }
-}
+@use '~styles/colors.scss' as colors;
+
+.progress-bar {
+  width: 100%;
+
+  display: grid;
+
+  &__background {
+    width: 100%;
+    height: 50%;
+
+    grid-row: 1;
+    grid-column: 1;
+
+    position: relative;
+    top: 25%;
+    z-index: 0;
+
+    background-color: colors.$gray150;
+    border-radius: 100000px;
+  }
+
+  &__foreground {
+    height: 6px;
+
+    grid-row: 1;
+    grid-column: 1;
+
+    position: relative;
+    z-index: 1;
+
+    background-color: colors.$primary300;
+    border-radius: 100000px;
+
+    transition: width 1s ease-in-out;
+  }
+}
diff --git a/src/components/RadioButton/index.scss b/src/components/RadioButton/index.scss
index 59cbf1ad..debcc3f9 100644
--- a/src/components/RadioButton/index.scss
+++ b/src/components/RadioButton/index.scss
@@ -1,67 +1,67 @@
-@use '~styles/colors' as colors;
-@use '~styles/fonts.scss' as fonts;
-
-.radio-container {
-  display: inline-flex;
-
-  align-items: center;
-
-  margin: 1rem;
-  padding: 1rem 8rem 1rem 1rem;
-  border: 0.15rem solid colors.$gray600;
-
-  border-radius: 2rem;
-
-  transition: border-color 0.3s;
-
-  cursor: pointer;
-
-  &:focus-within {
-    border-color: colors.$blue500;
-
-    .radio-dot {
-      color: colors.$blue500;
-    }
-  }
-
-  &__input {
-    width: 2.2rem;
-    height: 2.2rem;
-
-    margin: 0.8rem;
-    border: 0.15rem solid colors.$gray600;
-    border-color: colors.$blue500;
-
-    border-radius: 50%;
-
-    cursor: pointer;
-    appearance: none;
-    appearance: none;
-
-    &:checked {
-      border-color: colors.$blue500;
-
-      background: url('./images/ellipse.svg') no-repeat center center/60%;
-    }
-
-    &:disabled {
-      border-color: colors.$gray200;
-
-      cursor: not-allowed;
-
-      + .checkmark {
-        color: colors.$gray200;
-      }
-    }
-  }
-
-  &__dot {
-    font-family: fonts.$primaryFont;
-    color: colors.$gray600;
-    text-align: left;
-    font-size: fonts.$xs;
-    font-weight: fonts.$medium;
-    line-height: 2;
-    letter-spacing: 0;
-  }
-}
+@use '~styles/colors' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.radio-container {
+  display: inline-flex;
+
+  align-items: center;
+
+  margin: 1rem;
+  padding: 1rem 8rem 1rem 1rem;
+  border: 0.15rem solid colors.$gray600;
+
+  border-radius: 2rem;
+
+  transition: border-color 0.3s;
+
+  cursor: pointer;
+
+  &:focus-within {
+    border-color: colors.$primary200;
+
+    .radio-dot {
+      color: colors.$primary200;
+    }
+  }
+
+  &__input {
+    width: 2.2rem;
+    height: 2.2rem;
+
+    margin: 0.8rem;
+    border: 0.15rem solid colors.$gray600;
+    border-color: colors.$primary200;
+
+    border-radius: 50%;
+
+    cursor: pointer;
+    appearance: none;
+    appearance: none;
+
+    &:checked {
+      border-color: colors.$primary200;
+
+      background: url('./images/ellipse.svg') no-repeat center center/60%;
+    }
+
+    &:disabled {
+      border-color: colors.$gray200;
+
+      cursor: not-allowed;
+
+      + .checkmark {
+        color: colors.$gray200;
+      }
+    }
+  }
+
+  &__dot {
+    font-family: fonts.$primaryFont;
+    color: colors.$gray600;
+    text-align: left;
+    font-size: fonts.$xs;
+    font-weight: fonts.$medium;
+    line-height: 2;
+    letter-spacing: 0;
+  }
+}
diff --git a/src/components/RangeSlider/index.scss b/src/components/RangeSlider/index.scss
index f9a828ce..644f9a00 100644
--- a/src/components/RangeSlider/index.scss
+++ b/src/components/RangeSlider/index.scss
@@ -1,113 +1,113 @@
-@use '~styles/base.scss';
-@use '~styles/colors.scss' as colors;
-@use '~styles/breakpoints.scss' as breakpoints;
-
-.range-slider {
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-
-  align-items: center;
-
-  &__button {
-    color: rgb(209, 230, 255);
-
-    font-size: 2rem;
-
-    padding: 1rem;
-    border: 2px solid colors.$blue600;
-
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
-    background-color: colors.$blue500;
-    transform: translate(-50%, -50%);
-
-    border-radius: 0.8rem;
-
-    cursor: grab;
-    letter-spacing: 1;
-  }
-
-  &__info {
-    display: inline-block;
-
-    font-family: 'Noto Sans', sans-serif;
-    color: colors.$blue500;
-
-    text-align: center;
-    font-size: 8rem;
-    font-weight: 700;
-
-    margin-bottom: 2rem;
-  }
-
-  &__info:nth-child(2) {
-    display: none;
-  }
-
-  &__content {
-    width: 100%;
-    height: 100px;
-    overflow: hidden;
-
-    position: relative;
-
-    background-image: url('../../home/images/ruler-slider.svg');
-    background-repeat: repeat-x;
-    background-position: 0 center;
-  }
-
-  &__content::before {
-    left: 0;
-
-    background: linear-gradient(
-      to right,
-      colors.$appContentColor,
-      rgba(255, 255, 255, 0)
-    );
-  }
-
-  &__content::after {
-    right: 0;
-
-    background: linear-gradient(
-      to left,
-      colors.$appContentColor,
-      rgba(255, 255, 255, 0)
-    );
-  }
-
-  &__content::before,
-  &__content::after {
-    width: 30px;
-    height: 100%;
-
-    position: absolute;
-    z-index: 2;
-
-    pointer-events: none;
-    content: '';
-  }
-}
-
-@include breakpoints.from667 {
-  .range-slider__content::before,
-  .range-slider__content::after {
-    width: 16%;
-  }
-
-  .range-slider__button {
-    padding: 1rem 2rem;
-  }
-
-  .range-slider__info:first-child {
-    padding-right: 2rem;
-  }
-
-  .range-slider__info:nth-child(2) {
-    display: inline-block;
-  }
-}
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.range-slider {
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+
+  &__button {
+    color: rgb(209, 230, 255);
+
+    font-size: 2rem;
+
+    padding: 1rem;
+    border: 2px solid colors.$blue600;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    background-color: colors.$primary200;
+    transform: translate(-50%, -50%);
+
+    border-radius: 0.8rem;
+
+    cursor: grab;
+    letter-spacing: 1;
+  }
+
+  &__info {
+    display: inline-block;
+
+    font-family: 'Noto Sans', sans-serif;
+    color: colors.$primary200;
+
+    text-align: center;
+    font-size: 8rem;
+    font-weight: 700;
+
+    margin-bottom: 2rem;
+  }
+
+  &__info:nth-child(2) {
+    display: none;
+  }
+
+  &__content {
+    width: 100%;
+    height: 100px;
+    overflow: hidden;
+
+    position: relative;
+
+    background-image: url('../../home/images/ruler-slider.svg');
+    background-repeat: repeat-x;
+    background-position: 0 center;
+  }
+
+  &__content::before {
+    left: 0;
+
+    background: linear-gradient(
+      to right,
+      colors.$secondary100,
+      rgba(255, 255, 255, 0)
+    );
+  }
+
+  &__content::after {
+    right: 0;
+
+    background: linear-gradient(
+      to left,
+      colors.$secondary100,
+      rgba(255, 255, 255, 0)
+    );
+  }
+
+  &__content::before,
+  &__content::after {
+    width: 30px;
+    height: 100%;
+
+    position: absolute;
+    z-index: 2;
+
+    pointer-events: none;
+    content: '';
+  }
+}
+
+@include breakpoints.from667 {
+  .range-slider__content::before,
+  .range-slider__content::after {
+    width: 16%;
+  }
+
+  .range-slider__button {
+    padding: 1rem 2rem;
+  }
+
+  .range-slider__info:first-child {
+    padding-right: 2rem;
+  }
+
+  .range-slider__info:nth-child(2) {
+    display: inline-block;
+  }
+}
diff --git a/src/components/Tabber/index.scss b/src/components/Tabber/index.scss
index d8e65361..53a4a96c 100644
--- a/src/components/Tabber/index.scss
+++ b/src/components/Tabber/index.scss
@@ -71,12 +71,12 @@ $borderHeight: 0.3rem;
 
   position: relative;
 
-  background-color: colors.$appContentColor;
+  background-color: colors.$secondary100;
 
   cursor: pointer;
 
   &--active {
-    color: colors.$blue500;
+    color: colors.$primary200;
     font-weight: 700;
 
     &::after,
@@ -87,7 +87,7 @@ $borderHeight: 0.3rem;
       bottom: 0;
       z-index: 2;
 
-      background: colors.$blue500;
+      background: colors.$primary200;
 
       content: '';
     }
@@ -141,9 +141,9 @@ $borderHeight: 0.3rem;
     border-radius: 1.6rem;
 
     &--active {
-      color: colors.$appContentColor;
+      color: colors.$secondary100;
 
-      background-color: colors.$blue500;
+      background-color: colors.$primary200;
 
       &::after,
       &::before {
diff --git a/src/components/Toggle/index.scss b/src/components/Toggle/index.scss
index f87991f1..5454de0a 100644
--- a/src/components/Toggle/index.scss
+++ b/src/components/Toggle/index.scss
@@ -1,55 +1,55 @@
-@use '~styles/colors.scss' as colors;
-
-.toggle-container {
-  display: inline-block;
-
-  position: relative;
-
-  &__input {
-    width: 0;
-    height: 0;
-
-    position: absolute;
-
-    opacity: 0;
-
-    &:checked + .toggle-container__label {
-      background-color: colors.$blue500;
-
-      &::after {
-        transform: translateX(100%);
-      }
-    }
-  }
-
-  &__label {
-    min-width: 4.4rem;
-    min-height: 2.4rem;
-
-    display: flex;
-
-    align-items: center;
-
-    background-color: colors.$gray100;
-    border-radius: 3.4rem;
-
-    transition: background-color 0.3s;
-
-    cursor: pointer;
-
-    &::after {
-      width: 41%;
-      height: 75%;
-
-      position: absolute;
-      left: 10%;
-
-      background-color: colors.$appContentColor;
-      border-radius: 50%;
-
-      transition: transform 0.3s;
-
-      content: '';
-    }
-  }
-}
+@use '~styles/colors.scss' as colors;
+
+.toggle-container {
+  display: inline-block;
+
+  position: relative;
+
+  &__input {
+    width: 0;
+    height: 0;
+
+    position: absolute;
+
+    opacity: 0;
+
+    &:checked + .toggle-container__label {
+      background-color: colors.$primary200;
+
+      &::after {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  &__label {
+    min-width: 4.4rem;
+    min-height: 2.4rem;
+
+    display: flex;
+
+    align-items: center;
+
+    background-color: colors.$gray100;
+    border-radius: 3.4rem;
+
+    transition: background-color 0.3s;
+
+    cursor: pointer;
+
+    &::after {
+      width: 41%;
+      height: 75%;
+
+      position: absolute;
+      left: 10%;
+
+      background-color: colors.$secondary100;
+      border-radius: 50%;
+
+      transition: transform 0.3s;
+
+      content: '';
+    }
+  }
+}
diff --git a/src/home/components/SideMenu/index.scss b/src/home/components/SideMenu/index.scss
index 0d5c0f59..0953bb8f 100644
--- a/src/home/components/SideMenu/index.scss
+++ b/src/home/components/SideMenu/index.scss
@@ -1,134 +1,147 @@
-@use '~styles/colors.scss' as colors;
-@use '~styles/breakpoints.scss' as breakpoints;
-@use '~styles/fonts.scss' as fonts;
-
-.side-menu-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-inline: 2rem;
-
-  &__logo-container {
-    display: none;
-    padding-block: 4rem 2rem;
-    text-align: center;
-  }
-
-  &__logo {
-    max-width: 100%;
-  }
-
-  &__icons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 2.4rem;
-  }
-
-  &__notifications {
-    width: 1.6rem;
-    height: 1.95rem;
-  }
-
-  &__perfil {
-    border-radius: 100%;
-    width: 4.3rem;
-    height: 4.3rem;
-  }
-
-  &__exit {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  &__exitmenu {
-    width: 2.9rem;
-    height: 2.4rem;
-  }
-}
-
-.side-menu-content {
-  width: 28rem;
-  margin: 0 auto;
-  gap: 4.2rem;
-  display: flex;
-  flex-direction: column;
-
-  &__line {
-    border: 0.1rem solid colors.$appContentColor;
-    width: 100%;
-  }
-
-  &__lineinside {
-    margin: 4.2rem 0 4.2rem 0;
-    border: 0.1rem solid colors.$appContentColor;
-    width: 100%;
-  }
-
-  &__yourpet {
-    font-family: fonts.$primaryFont;
-  }
-
-  &__title-yourpet {
-    color: colors.$appContentColor;
-    font-size: 1.6rem;
-    font-style: fonts.$normal;
-    font-weight: fonts.$bold;
-  }
-
-  &__itens {
-    color: colors.$appContentColor;
-    font-family: fonts.$primaryFont;
-    font-size: 1.6rem;
-  }
-
-  &__ul {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.8rem;
-  }
-
-  &__menuitens {
-    display: flex;
-    padding: 1.2rem;
-    align-items: center;
-    gap: 1.2rem;
-    text-decoration: none;
-    color: colors.$appContentColor;
-
-    &--active {
-      background-color: rgb(0, 29, 49);
-      border-radius: 2rem;
-    }
-  }
-}
-
-@include breakpoints.from1024() {
-  .side-menu-nav {
-    &__logo-container {
-      display: block;
-      margin: 0 auto;
-    }
-
-    &__icons {
-      display: none;
-    }
-
-    &__exitmenu {
-      display: none;
-    }
-  }
-
-  .side-menu-content {
-    width: 70%;
-
-    &__menuitens {
-      transition: 0.3s;
-
-      &:hover {
-        opacity: 0.6;
-      }
-    }
-  }
-}
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/fonts.scss' as fonts;
+
+.side-menu-nav {
+  display: flex;
+
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 2rem;
+
+  &__logo-container {
+    display: none;
+    padding-block: 4rem 2rem;
+
+    text-align: center;
+  }
+
+  &__logo {
+    max-width: 100%;
+  }
+
+  &__icons {
+    display: flex;
+    gap: 2.4rem;
+
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__notifications {
+    width: 1.6rem;
+    height: 1.95rem;
+  }
+
+  &__perfil {
+    width: 4.3rem;
+    height: 4.3rem;
+
+    border-radius: 100%;
+  }
+
+  &__exit {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &__exitmenu {
+    width: 2.9rem;
+    height: 2.4rem;
+  }
+}
+
+.side-menu-content {
+  width: 28rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 4.2rem;
+
+  margin: 0 auto;
+
+  &__line {
+    width: 100%;
+
+    border: 0.1rem solid colors.$secondary100;
+  }
+
+  &__lineinside {
+    width: 100%;
+
+    margin: 4.2rem 0;
+    border: 0.1rem solid colors.$secondary100;
+  }
+
+  &__yourpet {
+    font-family: fonts.$primaryFont;
+  }
+
+  &__title-yourpet {
+    color: colors.$secondary100;
+    font-size: 1.6rem;
+    font-weight: fonts.$bold;
+    font-style: fonts.$normal;
+  }
+
+  &__itens {
+    font-family: fonts.$primaryFont;
+    color: colors.$secondary100;
+    font-size: 1.6rem;
+  }
+
+  &__ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+
+    align-items: flex-start;
+  }
+
+  &__menuitens {
+    display: flex;
+    gap: 1.2rem;
+
+    align-items: center;
+
+    color: colors.$secondary100;
+    text-decoration: none;
+
+    padding: 1.2rem;
+
+    &--active {
+      background-color: rgb(0, 29, 49);
+      border-radius: 2rem;
+    }
+  }
+}
+
+@include breakpoints.from1024() {
+  .side-menu-nav {
+    &__logo-container {
+      display: block;
+
+      margin: 0 auto;
+    }
+
+    &__icons {
+      display: none;
+    }
+
+    &__exitmenu {
+      display: none;
+    }
+  }
+
+  .side-menu-content {
+    width: 70%;
+
+    &__menuitens {
+      transition: 0.3s;
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+}
diff --git a/src/home/index.scss b/src/home/index.scss
index 0f6d6ea2..43693eaf 100644
--- a/src/home/index.scss
+++ b/src/home/index.scss
@@ -1,78 +1,86 @@
-@use '~styles/base.scss';
-@use '~styles/colors.scss' as colors;
-@use '~styles/breakpoints.scss' as breakpoints;
-@use '~styles/fonts.scss' as fonts;
-
-.home {
-  width: 200vw;
-  height: 100dvh;
-  overflow-x: hidden;
-  display: grid;
-  grid-template-areas:
-    'sidemenu nav'
-    'sidemenu content';
-  grid-template-rows: 8.1rem 1fr;
-  grid-template-columns: 100vw 100vw;
-  background-color: colors.$appColor;
-  transform: translateX(-100vw);
-
-  &--open-menu {
-    width: 100vw;
-    transform: translateX(0);
-    transition: transform 0.3s;
-  }
-
-  &--exit-menu {
-    width: 200vw;
-    transform: translateX(-100vw);
-    transition: transform 0.3s;
-  }
-
-  &__navigation {
-    display: flex;
-    grid-area: nav;
-
-    align-items: center;
-  }
-
-  &__sidemenu {
-    display: grid;
-    grid-area: sidemenu;
-    grid-template-rows: 8.1rem 1fr;
-  }
-
-  &__content {
-    overflow: auto;
-
-    grid-area: content;
-
-    background-color: colors.$appContentColor;
-
-    padding-inline: 2rem;
-    padding-block: 3.2rem;
-  }
-}
-
-@include breakpoints.from1024 {
-  .home {
-    width: 100vw;
-    transform: translateX(0);
-    grid-template-areas:
-      'sidemenu nav'
-      'sidemenu content';
-    grid-template-rows: 8.1rem 1fr;
-    grid-template-columns: 31.3rem 1fr;
-
-    &__content {
-      margin-inline: 2.4rem;
-
-      margin-bottom: 2.4rem;
-
-      border-radius: 1.6rem;
-    }
-
-    &__sidemenu {
-      display: block;
-    }
-  }
-}
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/fonts.scss' as fonts;
+
+.home {
+  width: 200vw;
+  height: 100dvh;
+  overflow-x: hidden;
+
+  display: grid;
+  grid-template-areas:
+    'sidemenu nav'
+    'sidemenu content';
+  grid-template-rows: 8.1rem 1fr;
+  grid-template-columns: 100vw 100vw;
+
+  background-color: colors.$primary600;
+  transform: translateX(-100vw);
+
+  &--open-menu {
+    width: 100vw;
+
+    transform: translateX(0);
+
+    transition: transform 0.3s;
+  }
+
+  &--exit-menu {
+    width: 200vw;
+
+    transform: translateX(-100vw);
+
+    transition: transform 0.3s;
+  }
+
+  &__navigation {
+    display: flex;
+    grid-area: nav;
+
+    align-items: center;
+  }
+
+  &__sidemenu {
+    display: grid;
+    grid-area: sidemenu;
+    grid-template-rows: 8.1rem 1fr;
+  }
+
+  &__content {
+    overflow: auto;
+
+    grid-area: content;
+
+    background-color: colors.$secondary100;
+
+    padding-inline: 2rem;
+    padding-block: 3.2rem;
+  }
+}
+
+@include breakpoints.from1024 {
+  .home {
+    width: 100vw;
+
+    grid-template-areas:
+      'sidemenu nav'
+      'sidemenu content';
+    grid-template-rows: 8.1rem 1fr;
+    grid-template-columns: 31.3rem 1fr;
+
+    transform: translateX(0);
+
+    &__content {
+      margin-inline: 2.4rem;
+
+      margin-bottom: 2.4rem;
+
+      border-radius: 1.6rem;
+    }
+
+    &__sidemenu {
+      display: block;
+    }
+  }
+}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 48196867..e76a1389 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -21,16 +21,17 @@ $success200: rgb(49, 138, 94);
 // error
 $error100: rgb(179, 38, 30);
 
-// neutrals (Grey)
-$grey100: rgb(236, 239, 242);
-$grey200: rgb(224, 224, 224);
-$grey300: rgb(179, 190, 205);
-$grey400: rgb(141, 141, 141);
-$grey500: rgb(96, 104, 115);
-$grey600: rgb(102, 116, 121);
-$grey700: rgb(128, 139, 154);
-$grey800: rgb(57, 67, 79);
-$grey900: rgb(32, 35, 38);
+// neutrals (Gray)
+$gray100: rgb(236, 239, 242);
+$gray150: rgb(236, 239, 242);
+$gray200: rgb(224, 224, 224);
+$gray300: rgb(179, 190, 205);
+$gray400: rgb(141, 141, 141);
+$gray500: rgb(96, 104, 115);
+$gray600: rgb(102, 116, 121);
+$gray700: rgb(6, 8, 9);
+$gray800: rgb(57, 67, 79);
+$gray900: rgb(32, 35, 38);
 
 // dark mode
 $dark100: rgb(30, 40, 51);
@@ -40,3 +41,7 @@ $dark300: rgb(0, 0, 0);
 // shades
 $shade50: rgb(255, 255, 255);
 $shade100: rgb(0, 0, 0);
+
+// custom
+
+$blue600: rgb(18, 104, 204);