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..1808c71 100644
--- a/server.js
+++ b/server.js
@@ -11,15 +11,16 @@ const pageHead =
 <head>
 <title>Результат заказа питомца</title>
 <link rel="stylesheet" href="/styles.css">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 </head>
 <body>
-<main>
-<h1>Результат заказа питомца</h1>
+<main class="container">
+<h1 class="text-primary">Результат заказа питомца</h1>
 `;
 
 const pageFoot =
 `
-<a href="/">⃪ Вернуться к форме заказа</a>
+<a class="btn btn-primary ps-4" href="/">⃪ Вернуться к форме заказа</a>
 </main>
 </body>
 </html>
diff --git a/static/index.html b/static/index.html
index 514b62f..6fb9e32 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,16 +1,111 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Форма выбора питомца</title>
     <link rel="stylesheet" href="styles.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    
 </head>
 <body>
 <main>
-    <h1>Найди себе друга!</h1>
+    <div class="container">
+        <h1 class="text-center pt-5 display-4 text-primary">Найди себе друга!</h1>
+        <div class="card mx-auto" style="max-width: 36rem;">
+        <form method="POST" action="/pets/orders" class="card-body">
 
-    <!--Форму размещай тут-->
+            <!--<input type="" name="name" class="form-control">Имя</input>-->
+            <!--<input type="" name="name" class="form-control">Имя</input>-->
+            <!--<input type="" name="name" class="form-control">Имя</input>-->
+            <h3 class="text-center lead">Ваши контактные данные</h3>
+            <div class="mb-3">
+                <label for="exampleInputEmail1" class="form-label">Адрес электронной почты</label>
+                <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите email">
+                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
+            </div>
+            
+            <div class="mb-3">
+                <label for="exampleInputName" class="form-label">Ваше имя</label>
+                <input type="name" name="name" class="form-control" id="exampleInputName" aria-describedby="nameHelp" placeholder="Введите ваше имя">
+            </div>
+            
+            <div class="mb-3">
+                <label for="exampleInputEmail1" class="form-label">Номер телефона</label>
+                <input type="phone" name="phone" class="form-control" id="exampleInputPhone" aria-describedby="emailHelp" placeholder="Введите ваш телефон">
+            </div>
+            
+            <hr/>
+            
+            <h3 class="text-center lead">Ваш желаемый питомец</h3>
 
+            <label for="exampleInputEmail1" class="form-label">Ваш новый друг</label>
+            <select class="form-select mb-3" name="petType" aria-label="Default select example">
+                <option value="cat">Котик</option>
+                <option value="dog">Собачка</option>
+                <option value="tiger">Тигра рогатая</option>
+                <!--<option value="Parrot">Папугайч</option>-->
+            </select>
+             
+            <label for="exampleInputEmail1" class="form-label">Пол</label>
+            <select class="form-select mb-3" name="gender" aria-label="Default select example">
+                <option value="boy">Мальчик</option>
+                <option value="girl">Девочка</option>
+                <option value="none">другое</option>
+            </select>
+            
+            <div class="row">
+                <div class="col">
+                    <div class="mb-3">
+                        <label for="inputDate">Цвет глаз</label>
+                        <input type="color" name="eyeColor" class="cursor-pointer h-10 outline-none rounded-full w-10 input-color-picker" 
+                        style="height: 2.5rem; width:100%; outline: none; cursor: pointer; padding:0; border:none; display: block;"
+                        value="#0d6efd">
+                    </div>
+                </div>
+
+                <div class="col-4">
+                    <div class="form-group">
+                        <label for="inputDate">Длина хвоста (см)</label>
+                        <input type="number" name="tailLength" class="form-control w-5" min="7" value="20" max="120">
+                    </div>
+                </div>
+
+                <div class="col-4">
+                    <div class="form-group">
+                        <label for="inputDate">Дата рождения:</label>
+                        <input type="date" name="dateOfBirth" class="form-control">
+                    </div>
+                </div>
+                <!--Длина хвоста
+                <input type="number" name="tailLength" class="form-control">-->
+            </div>
+            <div class="clearfix"></div>
+
+            
+            <div class="mb-3 form-check">
+                <input type="checkbox" name="rules" value="true" class="form-check-input" id="exampleCheck1" required>
+                <label class="form-check-label" for="exampleCheck1">Принимаю <a href="https://youtu.be/dQw4w9WgXcQ">
+                    политику конфиденциальности</a>
+                </label>
+            </div>
+    
+            <button type="submit" class="btn btn-primary mx-auto">отправить</button>
+        </form>
+        </div>
+    </div>
+
+    <!--
+        Готово:
+        Доп. Баллы:
+        
+        TODO: Доделать табличку
+        - Добавить стиль
+        - Перевести значения
+        - Цвет глаз в чита
+        - Длина хвоста в единицах измерения
+        - ...
+    -->
 </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index ef86c9a..d306233 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,31 +1,25 @@
-body {
-    background-color: #F2F2F2;
+.orders {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1rem;
 }
 
-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;
+.orders th,
+.orders td {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #eceeef;
 }
 
-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);
+.orders thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #eceeef;
 }
 
-.error {
-    color: rgba(173,30,24,0.88);
+.orders tbody + tbody {
+  border-top: 2px solid #eceeef;
 }
 
-.orders {
-    margin: 20px 0;
+.orders .orders {
+  background-color: #fff;
 }
\ No newline at end of file
