diff --git a/src/components/PetRegist/Bars.svg b/src/components/PetRegist/Bars.svg
new file mode 100644
index 00000000..3578a776
--- /dev/null
+++ b/src/components/PetRegist/Bars.svg
@@ -0,0 +1,47 @@
+
diff --git a/src/components/PetRegist/Ellipse-responsive.svg b/src/components/PetRegist/Ellipse-responsive.svg
new file mode 100644
index 00000000..8fb04684
--- /dev/null
+++ b/src/components/PetRegist/Ellipse-responsive.svg
@@ -0,0 +1,21 @@
+
diff --git a/src/components/PetRegist/Ellipse.svg b/src/components/PetRegist/Ellipse.svg
new file mode 100644
index 00000000..9c35c687
--- /dev/null
+++ b/src/components/PetRegist/Ellipse.svg
@@ -0,0 +1,21 @@
+
diff --git a/src/components/PetRegist/Ellipse.svg:Zone.Identifier b/src/components/PetRegist/Ellipse.svg:Zone.Identifier
new file mode 100644
index 00000000..bbbaf191
--- /dev/null
+++ b/src/components/PetRegist/Ellipse.svg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://www.figma.com/
diff --git a/src/components/PetRegist/index.css b/src/components/PetRegist/index.css
new file mode 100644
index 00000000..d9103ed2
--- /dev/null
+++ b/src/components/PetRegist/index.css
@@ -0,0 +1,98 @@
+* {
+ box-sizing: border-box;
+ width: 100%;
+}
+
+html {
+ font-size: 10px;
+}
+
+.organize {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#bonhoeffer {
+ display: flex;
+ flex-direction: column;
+}
+
+.question {
+ font-family: Montserrat;
+ font-size: 1.8rem;
+ font-weight: 500;
+ line-height: 26px;
+ letter-spacing: 0px;
+ text-align: center;
+ color: #39434F;
+}
+
+#adjuste {
+ font-family: Montserrat;
+ font-size: 1.4rem;
+ font-weight: 400;
+ line-height: 0;
+ letter-spacing: 0px;
+ text-align: center;
+ color: #606873;
+}
+
+#weight {
+ font-family: Montserrat;
+ font-size: 8rem;
+ font-weight: 700;
+ line-height: 50px;
+ letter-spacing: 0px;
+ text-align: center;
+ color: #1B85F3;
+ margin-bottom: 120px;
+}
+
+#rangeSlider {
+ margin-top: 0;
+ width: 600px;
+ -webkit-appearance: none;
+}
+#rangeSlider:focus {
+ outline: none;
+}
+#rangeSlider::-webkit-slider-runnable-track {
+ width: 10000px;
+ height: 1px;
+ cursor: pointer;
+ box-shadow: none;
+ background: #606873;
+ border-radius: 0px;
+ border: 0px solid #010101;
+}
+#rangeSlider::-webkit-slider-thumb {
+ box-shadow: none;
+ border: 2px solid #1268CC;
+ height: 42px;
+ width: 75px;
+ border-radius: 15px;
+ background: #1B85F3;
+ cursor: pointer;
+ -webkit-appearance: none;
+ margin-top: -20px;
+}
+
+#Slider-SVG {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ align-items: center;
+}
+
+#bars-svg {
+ width: 100%;
+ display: flex;
+ background-repeat: repeat-x;
+ position: absolute;
+ top: -80px;
+ z-index: -1;
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/src/components/PetRegist/index.css.map b/src/components/PetRegist/index.css.map
new file mode 100644
index 00000000..cb83a70e
--- /dev/null
+++ b/src/components/PetRegist/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAMA;EACE,sBAAA;EACA,WAAA;ACLF;;ADQA;EACE,eAAA;ACLF;;ADQA;EACE,WAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;ACLF;;ADQA;EACE,aAAA;EACA,sBAAA;ACLF;;ADQA;EACE,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kBAAA;EACA,cAlCQ;AC6BV;;ADQA;EACE,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;EACA,kBAAA;EACA,cA3CO;ACsCT;;ADOA;EACE,uBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kBAAA;EACA,cAtDY;EAuDZ,oBAAA;ACJF;;ADMA;EACE,aAAA;EACA,YAAA;EACA,wBAAA;ACHF;ADIE;EACE,aAAA;ACFJ;ADIE;EACE,cAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAnEK;EAoEL,kBAAA;EACA,yBAAA;ACFJ;ADIE;EACE,gBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,mBAAA;EACA,mBA3EE;EA4EF,eAAA;EACA,wBAAA;EACA,iBAAA;ACFJ;;ADKA;EACE,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,WAAA;EACA,mBAAA;ACFF;;ADIA;EACE,WAAA;EACA,aAAA;EACA,2BAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;ACDF","file":"index.css"}
\ No newline at end of file
diff --git a/src/components/PetRegist/index.js b/src/components/PetRegist/index.js
new file mode 100644
index 00000000..48ba4db9
--- /dev/null
+++ b/src/components/PetRegist/index.js
@@ -0,0 +1,48 @@
+/* eslint-disable prettier/prettier */
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+import Bars from './Bars.svg';
+
+const html = `
+
+
+
0
+
+
+
+
+
+
+`;
+
+const events = ['weight'];
+
+export default function Slider() {
+ Component.call(this, { html, events });
+ this.enable = true;
+
+ this.selected.get('rangeSlider').addEventListener(
+ 'input',
+ (event) => {
+ if (!this.enable) return;
+
+ this.weight();
+ this.setValue(event.target.value);
+ },
+ false,
+ );
+}
+Slider.prototype = Object.assign(Slider.prototype, Component.prototype, {
+ setTitle() {
+ this.selected.get('weight').textContent = Text;
+ },
+ setValue() {
+ this.selected.get('weight').textContent = this.selected.get('rangeSlider').value;
+ },
+ weight() {
+ this.emit('weight');
+ },
+ disable() {
+ this.enable = false;
+ },
+});
diff --git a/src/components/PetRegist/index.scss b/src/components/PetRegist/index.scss
new file mode 100644
index 00000000..36435dd6
--- /dev/null
+++ b/src/components/PetRegist/index.scss
@@ -0,0 +1,174 @@
+.slider {
+ width: 100%;
+ height: 50vh;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ justify-content: center;
+
+ font-size: 10px;
+
+ box-sizing: border-box;
+}
+
+.slider__text-slider{
+ width: 50vw;
+ height: 30vh;
+
+ display: flex;
+ flex-direction: column;
+
+ justify-content: center;
+
+ text-align: center;
+
+ margin: 5px;
+}
+
+.slider__weight{
+ font-family: Montserrat;
+ color: #1B85F3;
+ font-size: 8rem;
+ font-weight: 700;
+ line-height: 80px;
+}
+
+.slider__container{
+ width: 100%;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+
+ position: relative;
+}
+
+.slider__bars-svg{
+ width: 90vw;
+
+ display: flex;
+
+ align-items:center;
+
+ padding-right: 85px;
+
+ position:absolute;
+ top: -75px;
+ z-index: -1;
+}
+
+.slider__input{
+ width: 600px;
+
+ margin-top: -45px;
+
+ position: relative;
+ appearance: none;
+
+ &:focus {
+ outline: none;
+ }
+
+ &::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 0;
+
+ border: 0 solid #010101;
+
+ background: #606873;
+ box-shadow: none;
+ border-radius: 0;
+
+ cursor: pointer;
+ }
+
+ &::-webkit-slider-thumb {
+ width: 100px;
+ height: 100px;
+
+ background: url('./Ellipse.svg') no-repeat;
+ appearance: none;
+ }
+}
+
+@media only screen and (max-width: 600px){
+ *{
+ overscroll-behavior-x: none;
+ }
+
+ .slider {
+ width: 100vw;
+ height: 70vh;
+ overflow: hidden;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ justify-content: center;
+ }
+
+ .slider__weight{
+ overflow-y: hidden;
+
+ font-family: 'Montserrat';
+ font-size: 8rem;
+ font-weight: 700;
+ line-height: 10rem;
+ }
+
+ .slider__container{
+ width: 100vw;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+
+ position: relative;
+ }
+
+ .slider__bars-svg{
+ width: 200vw;
+
+ position:absolute;
+ top: 5px;
+ z-index: -1;
+ }
+
+ .slider__input{
+ width: 80vw;
+
+ margin-top: 15px;
+
+ position: relative;
+ appearance: none;
+
+ &:focus {
+ outline: none;
+ }
+
+ &::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 0;
+
+ border: 0 solid #010101;
+
+ box-shadow: none;
+ border-radius: 0;
+
+ cursor: pointer;
+ }
+
+ &::-webkit-slider-thumb {
+ width: 100px;
+ height: 50px;
+
+ background: url('./Ellipse-responsive.svg') no-repeat;
+ appearance: none;
+ }
+ }
+}
\ No newline at end of file