diff --git a/src/home/components/PetRegister/index.js b/src/home/components/PetRegister/index.js
new file mode 100644
index 00000000..43647887
--- /dev/null
+++ b/src/home/components/PetRegister/index.js
@@ -0,0 +1,63 @@
+import { Component } from 'pet-dex-utilities';
+import TextInput from '../../../components/TextInput';
+import UploadImage from '../../../components/UploadImage';
+import Button from '../../../components/Button';
+import './index.scss';
+
+const events = ['submit'];
+
+const html = `
+
+
+
+
Qual o nome do seu bichinho?
+
+
+
+
+`;
+
+export default function PetRegister() {
+ Component.call(this, { html, events });
+
+ const $inputContainer = this.selected.get('input-container');
+ const $uploadImage = this.selected.get('upload-image-container');
+ const $buttonContainer = this.selected.get('button-container');
+
+ this.input = new TextInput({
+ placeholder: 'Nome do Pet',
+ });
+
+ this.upload = new UploadImage();
+ this.button = new Button({
+ text: 'Continuar',
+ isFullWidth: true,
+ isDisabled: false,
+ });
+
+ const updateButtonVisibility = () => {
+ const input = this.input.getValue();
+ const image = this.upload.getImage();
+
+ this.button.setIsDisabled(!(input && image));
+ };
+ updateButtonVisibility();
+
+ this.upload.listen('value:change', updateButtonVisibility);
+ this.input.listen('value:change', updateButtonVisibility);
+
+ this.button.listen('click', () => {
+ const image = this.upload.getValue();
+ const name = this.input.getValue();
+ this.emit('submit', { image, name });
+ });
+
+ this.upload.mount($uploadImage);
+ this.input.mount($inputContainer);
+ this.button.mount($buttonContainer);
+}
+
+PetRegister.prototype = Object.assign(
+ PetRegister.prototype,
+ Component.prototype,
+);
diff --git a/src/home/components/PetRegister/index.scss b/src/home/components/PetRegister/index.scss
new file mode 100644
index 00000000..ad0833c3
--- /dev/null
+++ b/src/home/components/PetRegister/index.scss
@@ -0,0 +1,72 @@
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.pet-register {
+ display: flex;
+ flex-direction: column;
+
+ &__container {
+ width: 100%;
+ }
+
+ &__image {
+ max-width: 18.6rem;
+
+ margin: 5rem auto;
+ }
+
+ &__title {
+ font-family: fonts.$primaryFont;
+ color: colors.$gray800;
+ text-align: center;
+ font-size: fonts.$xs;
+ font-weight: fonts.$medium;
+
+ margin: 7rem auto 3rem;
+ }
+
+ &__input {
+ max-width: 32.7rem;
+
+ margin: 0 auto;
+ }
+
+ &__button {
+ width: 100%;
+
+ margin-top: 16.8rem;
+ padding: 2rem;
+ box-sizing: border-box;
+
+ box-shadow: 0 -3px 8px 0 rgba(73, 77, 90, 0.12156862745098039);
+ border-radius: 1.7rem;
+ }
+}
+
+@include breakpoints.from1024 {
+ .pet-register {
+ align-items: center;
+
+ &__title {
+ font-size: fonts.$sm;
+
+ margin-top: 15rem;
+ }
+
+ &__input {
+ max-width: 40rem;
+
+ margin: 0 auto;
+ }
+
+ &__button {
+ width: 43%;
+
+ margin-top: 4rem;
+ padding: unset;
+
+ box-shadow: unset;
+ }
+ }
+}