diff --git a/package-lock.json b/package-lock.json
index 6aaf3bc..486f987 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "tables-and-forms",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
diff --git a/server.js b/server.js
index e5f002e..a608163 100644
--- a/server.js
+++ b/server.js
@@ -20,6 +20,7 @@ const pageHead =
 const pageFoot =
 `
 <a href="/">⃪ Вернуться к форме заказа</a>
+<a href="/">Вернуться к форме заказа</a>
 </main>
 </body>
 </html>
@@ -40,6 +41,7 @@ app.use(express.urlencoded({ extended: true }));
 app.post('/pets/orders', (request, response) => {
     const reqBody = request.body;
     const pageBody = constructPageBody(reqBody);
+    console.log(pageBody)
 
     console.log(request.body);
 
diff --git a/static/index.html b/static/index.html
index 514b62f..7c1941c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -11,6 +11,66 @@ <h1>Найди себе друга!</h1>
 
     <!--Форму размещай тут-->
 
+    <form action="/pets/orders" method="POST">
+        <fieldset>
+            <legend>Информация о питомце</legend>
+
+            <label for="pet_type">Тип:</label>
+            <select name="petType" id="pet_type">
+                <option value="cat" selected>Кот</option>
+                <option value="dog">Собака</option>
+                <option value="hamster">Хомяк</option>
+                <option value="fish">Рыбки</option>
+            </select>
+            <br>
+            <label>Пол:</label>
+            <label>
+                <input type="radio" name="gender" value="girl">
+                Девочка
+            </label>
+            <label>
+                <input type="radio" name="gender" value="boy">
+                Мальчик
+            </label>
+            <label>
+                <input type="radio" name="gender" value="none" checked>
+                Не определен
+            </label>
+            <br>
+            <label for="eye_color">Цвет глаз:</label>
+            <input type="color" name="eyeColor" id="eye_color">
+            <br>
+            <label for="tail_Length">Длина хвота:</label>
+            <input type="number" name="tailLength" value=""/>
+            <br>
+        </fieldset>
+
+        <fieldset>
+            <legend>Информация о вас</legend>
+            <label for="name">Имя:</label>
+            <input type="text" name="name" id="name" placeholder="Введите имя" required value="">
+            <br>
+            <label for="date_of_birth">Дата рождения:</label>
+            <input type="date" name="dateOfBirth" value="" required/>
+            <br>
+            <label for="email">Email:</label>
+            <input type="email" name="email" id="email" placeholder="example@email.com">
+            <span class="invalid-email"></span>
+            <br>
+            <label for="phone">Телефон:</label>
+            <input type="tel" name="phone" id="phone" placeholder="+7">
+            <span class="invalid-phone"></span>
+            <br>
+            <label for="rules">Даю согласие на обработку персональных данных</label>
+            <input type="checkbox" name="rules" value="true" required>
+        </fieldset>
+
+        <div class="buttons">
+            <input type="submit" name="submit" value="Отправить">
+            <input type="reset" name="reset" value="Сбросить">
+        </div>
+    </form>
 </main>
+<script src="validate.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index ef86c9a..e25f7ee 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,31 +1,218 @@
 body {
-    background-color: #F2F2F2;
+  background-color: #f2f2f2;
 }
 
 main {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 1000px;
-    margin: 30px auto;
-    padding: 30px;
-    background: white;
-    min-height: calc(100vh - 60px);
-    border-radius: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1000px;
+  margin: 30px auto;
+  padding: 30px;
+  background: white;
+  min-height: calc(100vh - 60px);
+  border-radius: 20px;
 }
 
 h1 {
-    font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 300;
-    margin-top: 0;
-    font-size: 50px;
-    text-align: center;
-    color: rgba(173,38,164,0.67);
+  font-family: Arial, sans-serif;
+  font-weight: 300;
+  margin-top: 0;
+  font-size: 50px;
+  text-align: center;
+  color: rgba(173, 38, 164, 0.67);
 }
 
 .error {
-    color: rgba(173,30,24,0.88);
+  color: rgba(173, 30, 24, 0.88);
 }
 
 .orders {
-    margin: 20px 0;
-}
\ No newline at end of file
+  margin: 20px 0;
+}
+
+form {
+  margin: 0 100px;
+}
+
+fieldset {
+  padding: 20px;
+  border: 5px solid rgba(138, 16, 219, 0.67);
+  border-radius: 30px;
+  background-color: rgb(159, 225, 241);
+}
+
+fieldset:last-of-type {
+  margin-top: 30px;
+}
+
+legend {
+  padding: 0 10px;
+  margin-left: 20px;
+  margin-right: auto;
+  font-family: sans-serif;
+  color: darkslateblue;
+  font-weight: bold;
+  background-color: rgb(255, 200, 255);
+  border: 5px solid rgba(138, 16, 219, 0.67);
+  border-radius: 10px;
+}
+
+label {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  display: inline-block;
+  margin: 10px 0;
+  padding: 0 5px;
+}
+
+select {
+  padding: 0 5px;
+  margin: 5px;
+}
+
+select:focus {
+  background-color: whitesmoke;
+}
+
+input {
+  display: inline-block;
+  margin: 10px 0;
+}
+
+input:focus {
+  background-color: whitesmoke;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+}
+
+input[type="submit"],
+input[type="reset"] {
+  display: block;
+  width: 150px;
+  height: 50px;
+  background-color: rgb(255, 200, 255);
+  border-color: rgba(138, 16, 219, 0.67);
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  color: darkslateblue;
+  margin-top: 20px;
+}
+
+input[type="submit"]:hover,
+input[type="reset"]:hover {
+  background-color: rgb(255, 220, 255);
+}
+
+input[type="submit"] {
+  margin-right: 5px;
+}
+
+input:disabled,
+input:disabled:hover {
+  background-color: lavenderblush;
+  color: grey;
+}
+
+input[type="reset"] {
+  margin-left: 5px;
+}
+
+input[type="color"] {
+  margin: 0;
+}
+
+span.tail {
+  padding: 2px 6px;
+  color: darkslateblue;
+  background-color: white;
+  border: 1px solid darkviolet;
+  border-radius: 10px;
+  margin-left: 10px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.tail-range {
+  display: flex;
+  align-items: center;
+}
+
+.tail-max,
+.tail-min {
+  display: inline-block;
+  padding-left: 10px;
+  font-size: 15px;
+}
+
+.tail-min {
+  padding: 0;
+  padding-right: 10px;
+}
+
+.invalid {
+  border: 1px solid red;
+}
+
+.invalid-email,
+.invalid-phone {
+  color: red;
+  margin-left: 5px;
+}
+
+h3 {
+  text-align: center;
+}
+
+a {
+  display: block;
+  width: fit-content;
+  text-decoration: none;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 7px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: rgb(255, 220, 255);
+  font-weight: bold;
+  color: darkslateblue;
+  border-color: rgba(173, 38, 164, 0.67);
+}
+
+a:hover {
+  background-color: rgb(255, 240, 255);
+}
+
+table {
+  width: 100%;
+  border: 2px solid gray;
+  border-collapse: collapse;
+}
+
+tr {
+  text-align: center;
+}
+
+th {
+  border: 1px solid gray;
+  padding: 5px;
+  color: darkslateblue;
+  background-color: rgb(255, 200, 255);
+}
+
+td {
+  border: 1px solid gray;
+  padding: 5px;
+  background-color: rgb(255, 230, 255);
+  color: black;
+}
+
+input,
+select {
+  border: none;
+  border-radius: 13px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  padding: 5px 10px;
+}
diff --git a/static/validate.js b/static/validate.js
new file mode 100644
index 0000000..b0c65f7
--- /dev/null
+++ b/static/validate.js
@@ -0,0 +1,91 @@
+let form = document.querySelector('form');
+let phone = document.getElementById('phone');
+let email = document.getElementById('email');
+let rules = document.getElementById('rules');
+let submit = document.querySelector('.buttons input[type="submit"]');
+let reset = document.querySelector('.buttons input[type="reset"]');
+
+reset.addEventListener('click', function () {
+    form.querySelector('.invalid-phone').textContent = '';
+    phone.classList.remove('invalid');
+    form.querySelector('.invalid-email').textContent = '';
+    email.classList.remove('invalid');
+
+    let tail = document.querySelector('.tail');
+    tail.textContent = '';
+})
+
+submit.addEventListener('click', function (evt) {
+    if (!isValidEmail(email.value)) {
+        showInvalidInputEmail();
+        evt.preventDefault();
+    }
+
+    if (!isValidPhone(phone.value)) {
+        showInvalidInputPhone();
+        evt.preventDefault();
+    }
+});
+
+phone.addEventListener('focusin', function () {
+    phone.classList.remove('invalid');
+    form.querySelector('.invalid-phone').textContent = ''
+
+    if (!phone.value) {
+        phone.value = '+7 ';
+    }
+})
+
+phone.addEventListener('focusout', function () {
+    if (phone.value.length == 3) {
+        phone.value = '';
+    }
+})
+
+phone.addEventListener('input', function (evt) {
+    if (phone.value.length < 3) {
+        phone.value = '+7 '
+    }
+
+    if (!evt.inputType.startsWith('delete')) {
+        if (phone.value.length == 6) {
+            phone.value += ' ';
+        } else if ([10, 13].includes(phone.value.length)) {
+            phone.value += '-';
+        } else if (phone.value.length == 17) {
+            phone.value = phone.value.slice(0, phone.value.length - 1);
+        }
+        phone.value = phone.value.replace(/[A-ZazА-Яа-я]/, '');
+    } else {
+        if ([6, 10, 13].includes(phone.value.length)) {
+            phone.value = phone.value.slice(0, phone.value.length - 1);
+        }
+    }
+})
+
+email.addEventListener('focus', function () {
+    email.classList.remove('invalid');
+    form.querySelector('.invalid-email').textContent = ''
+})
+
+function isValidPhone(number) {
+    let regex = /\+\d \d\d\d \d\d\d-\d\d-\d\d/;
+    return number.match(regex);
+}
+
+function isValidEmail(email) {
+    let regex = /.+@.+/
+    return email.match(regex);
+}
+
+function showInvalidInputPhone() {
+    phone.classList.add('invalid');
+    let tip = form.querySelector('.invalid-phone');
+    tip.textContent = 'Неправильный формат';
+}
+
+function showInvalidInputEmail() {
+    email.classList.add('invalid');
+    let tip = form.querySelector('.invalid-email');
+    tip.textContent = 'Неправильный формат';
+}
\ No newline at end of file