diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2f88d12a..18376f1d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,16 +1,14 @@
 <template>
-  <div class="main__wrapper">
-    <div class="main__header">
-      <img src="@/assets/img/logo.svg" width="300" height="47" alt="V!U!E! Pizza" />
-    </div>
-    <h1>Добро пожаловать!</h1>
-    <p>
-      Это проект V!U!E! Pizza для обучения на профессиональном онлайн‑курсе<br />
-      <b>«Vue.js для опытных разработчиков».</b>
-    </p>
-  </div>
+  <app-layout>
+    <home-view />
+  </app-layout>
 </template>
 
+<script setup>
+import AppLayout from "@/layouts/AppLayout.vue";
+import HomeView from "@/views/HomeView.vue";
+</script>
+
 <style lang="scss">
 @import "@/assets/scss/app.scss";
 body {
diff --git a/frontend/src/common/components/AppDrag.vue b/frontend/src/common/components/AppDrag.vue
new file mode 100644
index 00000000..193b1919
--- /dev/null
+++ b/frontend/src/common/components/AppDrag.vue
@@ -0,0 +1,30 @@
+<template>
+    <div
+      :draggable="draggable"
+      @dragstart.self="onDragStart"
+      @dragover.prevent
+      @dragenter.prevent
+    >
+      <slot />
+    </div>
+  </template>
+  
+  <script setup>
+  import { DATA_TRANSFER_PAYLOAD } from "@/common/constants";
+  
+  const props = defineProps({
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+    dataTransfer: {
+      type: Object,
+      required: true,
+    },
+  });
+  
+  const onDragStart = ({ dataTransfer }) => {
+    const data = JSON.stringify(props.dataTransfer);
+    dataTransfer.setData(DATA_TRANSFER_PAYLOAD, data);
+  };
+  </script>
\ No newline at end of file
diff --git a/frontend/src/common/components/AppDrop.vue b/frontend/src/common/components/AppDrop.vue
new file mode 100644
index 00000000..2ef19b67
--- /dev/null
+++ b/frontend/src/common/components/AppDrop.vue
@@ -0,0 +1,25 @@
+<template>
+    <div @drop.stop="onDrop" @dragover.prevent @dragenter.prevent>
+      <slot />
+    </div>
+  </template>
+  
+  <script setup>
+  import { DATA_TRANSFER_PAYLOAD } from "@/common/constants";
+  
+  const emit = defineEmits(["drop"]);
+  
+  const onDrop = ({ dataTransfer }) => {
+    if (!dataTransfer) {
+      return;
+    }
+    
+    const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+    
+    if (payload) {
+      const transferData = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+      const data = JSON.parse(transferData);
+      emit("drop", data);
+    }
+  };
+  </script>
\ No newline at end of file
diff --git a/frontend/src/common/constants/index.js b/frontend/src/common/constants/index.js
new file mode 100644
index 00000000..7ff73a0c
--- /dev/null
+++ b/frontend/src/common/constants/index.js
@@ -0,0 +1 @@
+export const DATA_TRANSFER_PAYLOAD = "payload";
diff --git a/frontend/src/common/helpers/normalize.js b/frontend/src/common/helpers/normalize.js
new file mode 100644
index 00000000..5a9652b6
--- /dev/null
+++ b/frontend/src/common/helpers/normalize.js
@@ -0,0 +1,32 @@
+import doughSizes from "@/common/data/doughSizes";
+import ingredients from "@/common/data/ingredients";
+import sauces from "@/common/data/sauces";
+import sizes from "@/common/data/sizes";
+
+export const normalizeDough = (dough) => {
+  return {
+    ...dough,
+    value: doughSizes[dough.id],
+  };
+};
+
+export const normalizeSize = (size) => {
+  return {
+    ...size,
+    value: sizes[size.id],
+  };
+};
+
+export const normalizeIngredients = (ingredient) => {
+  return {
+    ...ingredient,
+    value: ingredients[ingredient.id],
+  };
+};
+
+export const normalizeSauces = (sauce) => {
+  return {
+    ...sauce,
+    value: sauces[sauce.id],
+  };
+};
\ No newline at end of file
diff --git a/frontend/src/layouts/AppHeader.vue b/frontend/src/layouts/AppHeader.vue
new file mode 100644
index 00000000..d5c270e5
--- /dev/null
+++ b/frontend/src/layouts/AppHeader.vue
@@ -0,0 +1,150 @@
+<template>
+    <header class="header">
+    <div class="header__logo">
+      <a href="index.html" class="logo">
+        <img src="@/assets/img/logo.svg" alt="Pizza logo" width="90" height="40">
+      </a>
+    </div>
+    <div class="header__cart">
+      <a href="cart.html">0 ₽</a>
+    </div>
+    <div class="header__user">
+      <a href="#" class="header__login"><span>Войти</span></a>
+    </div>
+  </header>
+</template>
+<style lang="scss" scoped>
+@import "@/assets/scss/ds-system/ds";
+
+.header {
+  position: relative;
+  z-index: 2;
+
+  display: flex;
+
+  padding: 0 2.12%;
+
+  background-color: $green-500;
+  box-shadow: $shadow-light;
+}
+
+.header__logo {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.header__cart {
+  margin-right: 10px;
+  margin-left: auto;
+
+  a {
+    @include b-s16-h19;
+
+    display: block;
+
+    padding: 21px 15px 21px 58px;
+
+    transition: 0.3s;
+
+    color: $white;
+    background-color: $green-500;
+    background-image: url("@/assets/img/cart.svg");
+    background-repeat: no-repeat;
+    background-position: 20px center;
+    background-size: 29px 27px;
+
+    &:hover:not(:active) {
+      background-color: $green-400;
+    }
+
+    &:active {
+      background-color: $green-600;
+    }
+
+    &:focus {
+      opacity: 0.5;
+    }
+  }
+}
+
+.header__user {
+  display: flex;
+  align-items: center;
+
+  a {
+    display: block;
+
+    padding: 14px 20px;
+
+    transition: 0.3s;
+
+    background-color: $green-500;
+
+    &:hover:not(:active) {
+      background-color: $green-400;
+    }
+
+    &:active {
+      background-color: $green-600;
+    }
+
+    &:focus {
+      opacity: 0.5;
+    }
+  }
+
+  img {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+
+    vertical-align: middle;
+
+    border-radius: 50%;
+  }
+
+  span {
+    @include r-s14-h16;
+
+    display: inline-block;
+
+    vertical-align: middle;
+
+    color: $white;
+  }
+}
+
+.header__logout {
+  &::before {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+
+    content: "";
+    vertical-align: middle;
+
+    background: url("@/assets/img/login.svg") no-repeat center;
+    background-size: auto 50%;
+  }
+}
+
+.header__login {
+  &::after {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-left: 8px;
+
+    content: "";
+    vertical-align: middle;
+
+    background: url("@/assets/img/login.svg") no-repeat center;
+    background-size: auto 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
new file mode 100644
index 00000000..628f8fbf
--- /dev/null
+++ b/frontend/src/layouts/AppLayout.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+      <app-header />
+      <slot />
+    </div>
+  </template>
+  
+  <script setup>
+  import AppHeader from "./AppHeader.vue";
+  </script>
+  
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/DiameterSelector.vue b/frontend/src/modules/constructor/DiameterSelector.vue
new file mode 100644
index 00000000..a6451230
--- /dev/null
+++ b/frontend/src/modules/constructor/DiameterSelector.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="content__diameter">
+      <div class="sheet">
+        <h2 class="title title--small sheet__title">Выберите размер</h2>
+  
+        <div class="sheet__content">
+          <label
+            v-for="sizeType in items"
+            :key="sizeType.id"
+            class="diameter__input"
+            :class="`diameter__input--${sizeType.value}`"
+          >
+            <input
+              type="radio"
+              name="diameter"
+              :value="sizeType.value"
+              :checked="sizeType.value === modelValue"
+              class="visually-hidden"
+              @input="emit('update:modelValue', sizeType.value)"
+            />
+            <span>{{ sizeType.name }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  
+  const emit = defineEmits(["update:modelValue"]);
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/ds-system/ds.scss";
+  @import "@/assets/scss/mixins/mixins.scss";
+  
+  .content__diameter {
+    width: 373px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+  
+  .diameter__input {
+    margin-right: 8.7%;
+    margin-bottom: 20px;
+    padding-top: 7px;
+    padding-bottom: 6px;
+    cursor: pointer;
+  
+    span {
+      @include r-s16-h19;
+      position: relative;
+      padding-left: 46px;
+      &::before {
+        @include p_center_v;
+        width: 36px;
+        height: 36px;
+        content: "";
+        transition: 0.3s;
+        border-radius: 50%;
+        background-color: $green-100;
+        background-image: url("@/assets/img/diameter.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+     
+    &--small {
+      span::before {
+        background-size: 18px;
+      }
+    }
+  
+    &--normal {
+      span::before {
+        background-size: 29px;
+      }
+    }
+  
+    &--big {
+      span::before {
+        background-size: 100%;
+      }
+    }
+  
+    &:hover {
+      span::before {
+        box-shadow: $shadow-regular;
+      }
+    }
+  
+    input {
+      &:checked + span::before {
+        box-shadow: $shadow-large;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/DoughSelector.vue b/frontend/src/modules/constructor/DoughSelector.vue
new file mode 100644
index 00000000..5281e6f9
--- /dev/null
+++ b/frontend/src/modules/constructor/DoughSelector.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="content__dough">
+      <div class="sheet">
+        <h2 class="title title--small sheet__title">Выберите тесто</h2>
+  
+        <div class="sheet__content">
+          <label
+            v-for="doughType in items"
+            :key="doughType.id"
+            class="dough__input"
+          >
+            <input
+              type="radio"
+              name="dough"
+              :value="doughType.value"
+              :checked="doughType.value === modelValue"
+              class="visually-hidden"
+              @input="emit('update:modelValue', doughType.value)"
+            />
+            <img :src="getImage(doughType.image)" :alt="doughType.name" />
+  
+            <b>{{ doughType.name }}</b>
+            <span>{{ doughType.description }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  const emit = defineEmits(["update:modelValue"]);
+
+const getImage = (image) => {
+  return new URL(`../../assets/img/${image}`, import.meta.url).href;
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/ds-system/ds.scss";
+@import "@/assets/scss/mixins/mixins.scss";
+
+.content__dough {
+  width: 527px;
+  margin-top: 15px;
+  margin-right: auto;
+  margin-bottom: 15px;
+}
+
+.dough__input {
+  position: relative;
+  margin-right: 8%;
+  margin-bottom: 20px;
+  padding-left: 50px;
+  cursor: pointer;
+
+  img {
+    @include p_center-v;
+    width: 36px;
+    height: 36px;
+    transition: 0.3s;
+    border-radius: 50%;
+  }
+  
+  b {
+    @include r-s16-h19;
+  }
+  
+  span {
+    @include l-s11-h13;
+    display: block;
+  }
+  
+  &:hover {
+    img {
+      box-shadow: $shadow-regular;
+    }
+  }
+
+  input {
+    &:checked + img {
+      box-shadow: $shadow-large;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/IngredientsSelector.vue b/frontend/src/modules/constructor/IngredientsSelector.vue
new file mode 100644
index 00000000..6e0d1ae9
--- /dev/null
+++ b/frontend/src/modules/constructor/IngredientsSelector.vue
@@ -0,0 +1,270 @@
+<template>
+    <div class="ingredients__filling">
+      <p>Начинка:</p>
+  
+      <ul class="ingredients__list">
+        <li
+          v-for="ingredientType in items"
+          :key="ingredientType.id"
+          class="ingredients__item"
+        >
+          <app-drag
+            :data-transfer="ingredientType"
+            :draggable="getValue(ingredientType.value) < MAX_INGREDIENT_COUNT"
+          >
+            <div class="filling">
+              <img
+                :src="getImage(ingredientType.image)"
+                :alt="ingredientType.name"
+              />
+              {{ ingredientType.name }}
+            </div>
+          </app-drag>
+  
+          <div class="counter ingredients__counter">
+            <button
+              type="button"
+              class="counter__button counter__button--minus"
+              :disabled="getValue(ingredientType.value) === 0"
+              @click="decrementValue(ingredientType.value)"
+            >
+              <span class="visually-hidden">Меньше</span>
+            </button>
+            <input
+              type="text"
+              name="counter"
+              class="counter__input"
+              :value="getValue(ingredientType.value)"
+              @input="inputValue(ingredientType.value, $event.target.value)"
+            />
+            <button
+              type="button"
+              class="counter__button counter__button--plus"
+              :disabled="getValue(ingredientType.value) === MAX_INGREDIENT_COUNT"
+              @click="incrementValue(ingredientType.value)"
+            >
+              <span class="visually-hidden">Больше</span>
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </template>
+  
+  <script setup>
+  import { toRef } from "vue";
+  import AppDrag from "@/common/components/AppDrag.vue";
+  import { MAX_INGREDIENT_COUNT } from "@/common/constants";
+  
+  const props = defineProps({
+    values: {
+      type: Object,
+      default: () => ({}),
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  const emit = defineEmits(["update"]);
+  const values = toRef(props, "values");
+  
+  const getValue = (ingredient) => {
+    return values.value[ingredient] ?? 0;
+  };
+  
+  const setValue = (ingredient, count) => {
+    emit("update", ingredient, Number(count));
+  };
+  
+  const decrementValue = (ingredient) => {
+    setValue(ingredient, getValue(ingredient) - 1);
+  };
+  
+  const incrementValue = (ingredient) => {
+    setValue(ingredient, getValue(ingredient) + 1);
+  };
+  
+  const inputValue = (ingredient, count) => {
+    return setValue(ingredient, Math.min(MAX_INGREDIENT_COUNT, Number(count)));
+  };
+  
+  const getImage = (image) => {
+    return new URL(`../../assets/img/${image}`, import.meta.url).href;
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/ds-system/ds.scss";
+  @import "@/assets/scss/mixins/mixins.scss";
+  
+  .ingredients__filling {
+    width: 100%;
+    p {
+      @include r-s16-h19;
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+  }
+  
+  .ingredients__list {
+    @include clear-list;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  
+  .ingredients__item {
+    width: 100px;
+    min-height: 40px;
+    margin-right: 17px;
+    margin-bottom: 35px;
+  }
+  
+  .ingredients__counter {
+    width: 54px;
+    margin-top: 10px;
+    margin-left: 36px;
+  }
+  
+  .counter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .counter__button {
+    $el: &;
+    $size_icon: 50%;
+    position: relative;
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    transition: 0.3s;
+    border: none;
+    border-radius: 50%;
+    outline: none;
+  
+    &--minus {
+      background-color: $purple-100;
+     
+      &::before {
+        @include p_center-all;
+        width: $size_icon;
+        height: 2px;
+        content: "";
+        border-radius: 2px;
+        background-color: $black;
+      }
+       
+      &:hover:not(:active):not(:disabled) {
+        background-color: $purple-200;
+      }
+       
+      &:active:not(:disabled) {
+        background-color: $purple-300;
+      }
+       
+      &:focus:not(:disabled) {
+        box-shadow: $shadow-regular;
+      }
+       
+      &:disabled {
+        cursor: default;
+        &::before {
+          opacity: 0.1;
+        }
+      }
+    }
+  
+    &--plus {
+      background-color: $green-500;
+     
+      &::before {
+        @include p_center-all;
+        width: $size_icon;
+        height: 2px;
+        content: "";
+        border-radius: 2px;
+        background-color: $white;
+      }
+       
+      &::after {
+        @include p_center-all;
+        width: $size_icon;
+        height: 2px;
+        content: "";
+        transform: translate(-50%, -50%) rotate(90deg);
+        border-radius: 2px;
+        background-color: $white;
+      }
+       
+      &:hover:not(:active):not(:disabled) {
+        background-color: $green-400;
+      }
+       
+      &:active:not(:disabled) {
+        background-color: $green-600;
+      }
+       
+      &:focus:not(:disabled) {
+        box-shadow: $shadow-regular;
+      }
+       
+      &:disabled {
+        cursor: default;
+        opacity: 0.3;
+      }
+    }
+  
+    &--orange {
+      background-color: $orange-200;
+     
+      &:hover:not(:active):not(:disabled) {
+        background-color: $orange-100;
+      }
+       
+      &:active:not(:disabled) {
+        background-color: $orange-300;
+      }
+    }
+  }
+  
+  .counter__input {
+    @include r-s14-h16;
+    box-sizing: border-box;
+    width: 22px;
+    margin: 0;
+    padding: 0 3px;
+    text-align: center;
+    color: $black;
+    border: none;
+    border-radius: 10px;
+    outline: none;
+    background-color: transparent;
+  
+    &:focus {
+      box-shadow: inset $shadow-regular;
+    }
+  }
+  
+  .filling {
+    @include r-s14-h16;
+    position: relative;
+    display: block;
+    padding-left: 36px;
+  
+    img {
+      @include p_center-v;
+      display: block;
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      padding: 4px;
+      border-radius: 50%;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/PizzaConstructor.vue b/frontend/src/modules/constructor/PizzaConstructor.vue
new file mode 100644
index 00000000..5193a99f
--- /dev/null
+++ b/frontend/src/modules/constructor/PizzaConstructor.vue
@@ -0,0 +1,235 @@
+<template>
+    <div class="content__constructor">
+      <app-drop @drop="emit('drop', $event.value)">
+        <div class="pizza" :class="`pizza--foundation--${dough}-${sauce}`">
+          <div class="pizza__wrapper">
+            <div
+              v-for="(value, key) in pizzaIngredients"
+              :key="key"
+              class="pizza__filling"
+              :class="[
+                `pizza__filling--${key}`,
+                value === TWO_INGREDIENTS && 'pizza__filling--second',
+                value === THREE_INGREDIENTS && 'pizza__filling--third',
+              ]"
+            />
+          </div>
+        </div>
+      </app-drop>
+    </div>
+  </template>
+  
+  <script setup>
+  import { computed } from "vue";
+  import AppDrop from "@/common/components/AppDrop.vue";
+  const TWO_INGREDIENTS = 2;
+  const THREE_INGREDIENTS = 3;
+  
+  const props = defineProps({
+    dough: {
+      type: String,
+      default: "light",
+    },
+    sauce: {
+      type: String,
+      default: "tomato",
+    },
+    ingredients: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  
+  const emit = defineEmits(["drop"]);
+  
+  const pizzaIngredients = computed(() => {
+     /*
+     * props.ingredients - это объект с ингредиентами вида { ингредиент: количество }
+     * при помощи reduce нужно оставить только те, количество которые больше 0
+     * для этого перебираем каждую пару [ингредиент, количество]
+     * и если количество больше 0, добавляем в объект-результат
+     */
+    return Object.entries(props.ingredients).reduce((result, entry) => {
+      /* [ингредиент, количество] */
+      const [key, value] = entry;
+      if (value > 0) {
+        result[key] = value;
+      }
+          
+      return result;
+    }, {});
+  });
+  </script>
+  
+  <style lang="scss" scoped>
+  .content__constructor {
+    width: 315px;
+    margin-top: 25px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  
+  .pizza__wrapper {
+    width: 100%;
+    padding-bottom: 100%;
+  }
+  
+  .pizza__filling {
+    $bl: &;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+  
+    &::before,
+    &::after {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      content: "";
+      background-image: inherit;
+    }
+     
+    &--second {
+      &::before {
+        display: block;
+        transform: rotate(45deg);
+      }
+    }
+  
+    &--third {
+      &::before {
+        display: block;
+        transform: rotate(45deg);
+      }
+      &::after {
+        display: block;
+        transform: rotate(-45deg);
+      }
+    }
+  
+    &--ananas,
+    &--ananas.pizza__filling--second::before,
+    &--ananas.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/ananas.svg");
+    }
+     
+    &--bacon,
+    &--bacon.pizza__filling--second::before,
+    &--bacon.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/bacon.svg");
+    }
+     
+    &--blue_cheese,
+    &--blue.pizza__filling--second::before,
+    &--blue.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/blue_cheese.svg");
+    }
+     
+    &--cheddar,
+    &--cheddar.pizza__filling--second::before,
+    &--cheddar.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/cheddar.svg");
+    }
+     
+    &--chile,
+    &--chile.pizza__filling--second::before,
+    &--chile.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/chile.svg");
+    }
+     
+    &--ham,
+    &--ham.pizza__filling--second::before,
+    &--ham.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/ham.svg");
+    }
+     
+    &--jalapeno,
+    &--jalapeno.pizza__filling--second::before,
+    &--jalapeno.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/jalapeno.svg");
+    }
+     
+    &--mozzarella,
+    &--mozzarella.pizza__filling--second::before,
+    &--mozzarella.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/mozzarella.svg");
+    }
+     
+    &--mushrooms,
+    &--mushrooms.pizza__filling--second::before,
+    &--mushrooms.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/mushrooms.svg");
+    }
+     
+    &--olives,
+    &--olives.pizza__filling--second::before,
+    &--olives.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/olives.svg");
+    }
+     
+    &--onion,
+    &--onion.pizza__filling--second::before,
+    &--onion.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/onion.svg");
+    }
+     
+    &--parmesan,
+    &--parmesan.pizza__filling--second::before,
+    &--parmesan.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/parmesan.svg");
+    }
+     
+    &--salami,
+    &---salami.pizza__filling--second::before,
+    &---salami.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/salami.svg");
+    }
+     
+    &--salmon,
+    &--salmon.pizza__filling--second::before,
+    &--salmon.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/salmon.svg");
+    }
+     
+    &--tomatoes,
+    &--tomatoes.pizza__filling--second::before,
+    &--tomatoes.pizza__filling--third::after {
+      background-image: url("@/assets/img/filling-big/tomatoes.svg");
+    }
+  }
+  
+  .pizza {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+  
+    &--foundation--large-creamy {
+      background-image: url("@/assets/img/foundation/big-creamy.svg");
+    }
+     
+    &--foundation--large-tomato {
+      background-image: url("@/assets/img/foundation/big-tomato.svg");
+    }
+     
+    &--foundation--light-creamy {
+      background-image: url("@/assets/img/foundation/small-creamy.svg");
+    }
+     
+    &--foundation--light-tomato {
+      background-image: url("@/assets/img/foundation/small-tomato.svg");
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/frontend/src/modules/constructor/SauceSelector.vue b/frontend/src/modules/constructor/SauceSelector.vue
new file mode 100644
index 00000000..4c6a3f95
--- /dev/null
+++ b/frontend/src/modules/constructor/SauceSelector.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="ingredients__sauce">
+      <p>Основной соус:</p>
+  
+      <label
+        v-for="sauceType in items"
+        :key="sauceType.id"
+        class="radio ingredients__input"
+      >
+        <input
+          type="radio"
+          name="sauce"
+          :value="sauceType.value"
+          :checked="sauceType.value === modelValue"
+          @input="emit('update:modelValue', sauceType.value)"
+        />
+        <span>{{ sauceType.name }}</span>
+      </label>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  
+  const emit = defineEmits(["update:modelValue"]);
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/ds-system/ds.scss";
+  
+  .ingredients__sauce {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-bottom: 14px;
+  
+    p {
+      @include r-s16-h19;
+      margin-top: 0;
+      margin-right: 16px;
+      margin-bottom: 10px;
+    }
+  }
+  
+  .ingredients__input {
+    margin-right: 24px;
+    margin-bottom: 10px;
+  }
+  </style>
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 00000000..dbe102a6
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,1012 @@
+<template>
+<main class="content">
+    <form action="#" method="post">
+
+      <div class="content__wrapper">
+        <h1 class="title title--big">Конструктор пиццы</h1>
+
+        <div class="sheet__content dough">
+          <label
+            class="dough__input"
+            v-for="doughType in doughItems"
+            :key="doughType.id"
+          >
+            <input
+              type="radio"
+              name="dough"
+              :value="doughType.value"
+              class="visually-hidden"
+              checked
+            />
+            <img :src="getImage(doughType.image)" :alt="doughType.name" />
+
+            <b>{{ doughType.name }}</b>
+            <span>{{ doughType.description }}</span>
+          </label>
+        </div>
+
+        <div class="sheet__content diameter">
+          <label
+            class="diameter__input"
+            :class="`diameter__input--${sizeType.value}`"
+            v-for="sizeType in sizeItems"
+            :key="sizeType.id"
+          >
+            <input
+              type="radio"
+              name="diameter"
+              :value="sizeType.value"
+              class="visually-hidden"
+            />
+            <span>{{ sizeType.name }}</span>
+          </label>
+        </div>
+
+
+        <div class="content__ingredients">
+          <div class="sheet">
+            <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
+
+            <div class="sheet__content ingredients">
+
+              <div class="ingredients__sauce">
+                <p>Основной соус:</p>
+
+                <label
+                  class="radio ingredients__input"
+                  v-for="sauceType in sauceItems"
+                  :key="sauceType.id"
+                >
+                  <input type="radio" name="sauce" :value="sauceType.value" />
+                  <span>{{ sauceType.name }}</span>
+                </label>
+              </div>
+
+              <div class="ingredients__filling">
+                <p>Начинка:</p>
+
+                <ul class="ingredients__list">
+                  <li
+                    class="ingredients__item"
+                    v-for="ingredientType in ingredientItems"
+                    :key="ingredientType.id"
+                  >
+                    <div class="filling">
+                      <img
+                        :src="getImage(ingredientType.image)"
+                        :alt="ingredientType.name"
+                      />
+                      {{ ingredientType.name }}
+                    </div>
+
+                    <div class="counter counter--orange ingredients__counter">
+                      <button
+                        type="button"
+                        class="counter__button counter__button--minus"
+                        disabled
+                      >
+                        <span class="visually-hidden">Меньше</span>
+                      </button>
+                      <input
+                        type="text"
+                        name="counter"
+                        class="counter__input"
+                        value="0"
+                      />
+                      <button
+                        type="button"
+                        class="counter__button counter__button--plus"
+                      >
+                        <span class="visually-hidden">Больше</span>
+                      </button>
+                    </div>
+                  </li>
+                </ul>
+
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+        <div class="content__pizza">
+          <label class="input">
+            <span class="visually-hidden">Название пиццы</span>
+            <input type="text" name="pizza_name" placeholder="Введите название пиццы">
+          </label>
+
+          <div class="content__constructor">
+            <div class="pizza pizza--foundation--big-tomato">
+              <div class="pizza__wrapper">
+                <div class="pizza__filling pizza__filling--ananas"></div>
+                <div class="pizza__filling pizza__filling--bacon"></div>
+                <div class="pizza__filling pizza__filling--cheddar"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="content__result">
+            <p>Итого: 0 ₽</p>
+            <button type="button" class="button" disabled>Готовьте!</button>
+          </div>
+        </div>
+
+      </div>
+
+    </form>
+  </main>
+  </template>
+
+<script setup>
+import {
+  normalizeDough,
+  normalizeIngredients,
+  normalizeSauces,
+  normalizeSize,
+} from "@/common/helpers/normalize";
+
+import doughJSON from "@/mocks/dough.json";
+import ingredientsJSON from "@/mocks/ingredients.json";
+import saucesJSON from "@/mocks/sauces.json";
+import sizesJSON from "@/mocks/sizes.json";
+
+const doughItems = doughJSON.map(normalizeDough);
+const ingredientItems = ingredientsJSON.map(normalizeIngredients);
+const sauceItems = saucesJSON.map(normalizeSauces);
+const sizeItems = sizesJSON.map(normalizeSize);
+
+const getImage = image => {
+  // https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
+  return new URL(`../assets/img/${image}`, import.meta.url).href
+}
+
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/ds-system/ds.scss";
+@import "@/assets/scss/mixins/mixins.scss";
+
+.content {
+  padding-top: 20px;
+}
+
+.content__wrapper {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+
+  width: 920px;
+  margin: 0 auto;
+  padding-right: 2.12%;
+  padding-bottom: 30px;
+  padding-left: 2.12%;
+}
+
+.content__dough {
+  width: 527px;
+  margin-top: 15px;
+  margin-right: auto;
+  margin-bottom: 15px;
+}
+
+.content__diameter {
+  width: 373px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.content__ingredients {
+  width: 527px;
+  margin-top: 15px;
+  margin-right: auto;
+  margin-bottom: 15px;
+}
+
+.content__pizza {
+  width: 373px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.content__constructor {
+  width: 315px;
+  margin-top: 25px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.content__result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-top: 25px;
+
+  p {
+    @include b-s24-h28;
+
+    margin: 0;
+  }
+
+  button {
+    margin-left: 12px;
+    padding: 16px 45px;
+  }
+}
+
+.sheet {
+  padding-top: 15px;
+
+  border-radius: 8px;
+  background-color: $white;
+  box-shadow: $shadow-light;
+}
+
+.sheet__title {
+  padding-right: 18px;
+  padding-left: 18px;
+}
+
+.sheet__content {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  margin-top: 8px;
+  padding-top: 18px;
+  padding-right: 18px;
+  padding-left: 18px;
+
+  border-top: 1px solid rgba($green-500, 0.1);
+}
+
+.ingredients__sauce {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  width: 100%;
+  margin-bottom: 14px;
+
+  p {
+    @include r-s16-h19;
+
+    margin-top: 0;
+    margin-right: 16px;
+    margin-bottom: 10px;
+  }
+}
+
+.ingredients__input {
+  margin-right: 24px;
+  margin-bottom: 10px;
+}
+
+.ingredients__filling {
+  width: 100%;
+
+  p {
+    @include r-s16-h19;
+
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+}
+
+.title {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+
+  color: $black;
+
+  &--big {
+    @include b-s36-h42;
+  }
+
+  &--small {
+    @include b-s18-h21;
+  }
+}
+
+.ingredients__list {
+  @include clear-list;
+
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.ingredients__item {
+  width: 100px;
+  min-height: 40px;
+  margin-right: 17px;
+  margin-bottom: 35px;
+}
+
+.ingredients__counter {
+  width: 54px;
+  margin-top: 10px;
+  margin-left: 36px;
+}
+
+.radio {
+  cursor: pointer;
+
+  span {
+    @include r-s16-h19;
+
+    position: relative;
+
+    padding-left: 28px;
+
+    &:before {
+      @include p_center-v;
+
+      display: block;
+
+      box-sizing: border-box;
+      width: 20px;
+      height: 20px;
+
+      content: "";
+      transition: 0.3s;
+
+      border: 1px solid $purple-400;
+      border-radius: 50%;
+      background-color: $white;
+    }
+  }
+
+  &:hover {
+    input:not(:checked):not(:disabled) + span {
+      &:before {
+        border-color: $purple-800;
+      }
+    }
+  }
+
+  input {
+    display: none;
+
+    &:checked + span {
+      &:before {
+        border: 6px solid $green-500;
+      }
+    }
+
+    &:disabled {
+      & + span {
+        &:before {
+          border-color: $purple-400;
+          background-color: $silver-200;
+        }
+      }
+
+      &:checked + span {
+        &:before {
+          border: 6px solid $purple-400;
+        }
+      }
+    }
+  }
+}
+
+.counter {
+  display: flex;
+
+  justify-content: space-between;
+  align-items: center;
+}
+
+.counter__button {
+  $el: &;
+  $size_icon: 50%;
+
+  position: relative;
+
+  display: block;
+
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  transition: 0.3s;
+
+  border: none;
+  border-radius: 50%;
+  outline: none;
+
+  &--minus {
+    background-color: $purple-100;
+
+    &::before {
+      @include p_center-all;
+
+      width: $size_icon;
+      height: 2px;
+
+      content: "";
+
+      border-radius: 2px;
+      background-color: $black;
+    }
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: $purple-200;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $purple-300;
+    }
+
+    &:focus:not(:disabled) {
+      box-shadow: $shadow-regular;
+    }
+
+    &:disabled {
+      cursor: default;
+
+      &::before {
+        opacity: 0.1;
+      }
+    }
+  }
+
+  &--plus {
+    background-color: $green-500;
+
+    &::before {
+      @include p_center-all;
+
+      width: $size_icon;
+      height: 2px;
+
+      content: "";
+
+      border-radius: 2px;
+      background-color: $white;
+    }
+
+    &::after {
+      @include p_center-all;
+
+      width: $size_icon;
+      height: 2px;
+
+      content: "";
+      transform: translate(-50%, -50%) rotate(90deg);
+
+      border-radius: 2px;
+      background-color: $white;
+    }
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: $green-400;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $green-600;
+    }
+
+    &:focus:not(:disabled) {
+      box-shadow: $shadow-regular;
+    }
+
+    &:disabled {
+      cursor: default;
+
+      opacity: 0.3;
+    }
+  }
+
+  &--orange {
+    background-color: $orange-200;
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: $orange-100;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $orange-300;
+    }
+  }
+}
+
+.counter__input {
+  @include r-s14-h16;
+
+  box-sizing: border-box;
+  width: 22px;
+  margin: 0;
+  padding: 0 3px;
+
+  text-align: center;
+
+  color: $black;
+  border: none;
+  border-radius: 10px;
+  outline: none;
+  background-color: transparent;
+
+  &:focus {
+    box-shadow: inset $shadow-regular;
+  }
+}
+
+.dough__input {
+  position: relative;
+
+  margin-right: 8%;
+  margin-bottom: 20px;
+  padding-left: 50px;
+
+  cursor: pointer;
+
+  img {
+    @include p_center-v;
+
+    width: 36px;
+    height: 36px;
+
+    transition: 0.3s;
+
+    border-radius: 50%;
+  }
+
+  b {
+    @include r-s16-h19;
+  }
+
+  span {
+    @include l-s11-h13;
+
+    display: block;
+  }
+
+  &:hover {
+    img {
+      box-shadow: $shadow-regular;
+    }
+  }
+
+  input {
+    &:checked + img {
+      box-shadow: $shadow-large;
+    }
+  }
+}
+
+.diameter__input {
+  margin-right: 8.7%;
+  margin-bottom: 20px;
+  padding-top: 7px;
+  padding-bottom: 6px;
+
+  cursor: pointer;
+
+  span {
+    @include r-s16-h19;
+
+    position: relative;
+
+    padding-left: 46px;
+
+    &::before {
+      @include p_center_v;
+
+      width: 36px;
+      height: 36px;
+
+      content: "";
+      transition: 0.3s;
+
+      border-radius: 50%;
+      background-color: $green-100;
+      background-image: url("@/assets/img/diameter.svg");
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
+
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
+
+  &--small {
+    span::before {
+      background-size: 18px;
+    }
+  }
+
+  &--normal {
+    span::before {
+      background-size: 29px;
+    }
+  }
+
+  &--big {
+    span::before {
+      background-size: 100%;
+    }
+  }
+
+  &:hover {
+    span::before {
+      box-shadow: $shadow-regular;
+    }
+  }
+
+  input {
+    &:checked + span::before {
+      box-shadow: $shadow-large;
+    }
+  }
+}
+
+.filling {
+  @include r-s14-h16;
+
+  position: relative;
+
+  display: block;
+
+  padding-left: 36px;
+
+  img {
+    @include p_center-v;
+
+    display: block;
+
+    width: 32px;
+    height: 32px;
+
+    box-sizing: border-box;
+    padding: 4px;
+
+    border-radius: 50%;
+  }
+}
+
+.button {
+  $bl: &;
+
+  @include b-s18-h21;
+  font-family: inherit;
+  display: block;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  transition: 0.3s;
+  text-align: center;
+
+  color: $white;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  box-shadow: $shadow-medium;
+
+  background-color: $green-500;
+
+  &:hover:not(:active):not(:disabled) {
+    background-color: $green-400;
+  }
+
+  &:active:not(:disabled) {
+    background-color: $green-600;
+  }
+
+  &:focus:not(:disabled) {
+    opacity: 0.5;
+  }
+
+  &:disabled {
+    background-color: $green-300;
+    color: rgba($white, 0.2);
+    cursor: default;
+  }
+
+  &--border {
+    background-color: transparent;
+    border: 1px solid $green-500;
+    color: $black;
+    box-shadow: none;
+
+    &:hover:not(:active):not(:disabled) {
+      color: $green-500;
+      border-color: $green-500;
+      background-color: transparent;
+    }
+
+    &:active:not(:disabled) {
+      color: $green-600;
+      border-color: $green-600;
+      background-color: transparent;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &--transparent {
+    @include b-s14-h16;
+    background-color: transparent;
+    box-shadow: none;
+    color: $black;
+
+    &:hover:not(:active):not(:disabled) {
+      color: $red-800;
+      background-color: transparent;
+    }
+
+    &:active:not(:disabled) {
+      color: $red-900;
+      background-color: transparent;
+    }
+
+    &:disabled {
+      opacity: 0.25;
+    }
+  }
+
+  &--arrow {
+    &::before {
+      content: "";
+      background-image: url("@/assets/img/button-arrow.svg");
+      background-position: center;
+      background-repeat: no-repeat;
+      margin-right: 16px;
+      width: 18px;
+      height: 18px;
+      display: inline-block;
+      vertical-align: middle;
+      transform: translateY(-1px);
+    }
+  }
+
+  &--white {
+    background-color: $white;
+    color: $green-500;
+  }
+}
+
+.pizza {
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+
+  &--foundation--big-creamy {
+    background-image: url("@/assets/img/foundation/big-creamy.svg");
+  }
+
+  &--foundation--big-tomato {
+    background-image: url("@/assets/img/foundation/big-tomato.svg");
+  }
+
+  &--foundation--small-creamy {
+    background-image: url("@/assets/img/foundation/small-creamy.svg");
+  }
+
+  &--foundation--small-tomato {
+    background-image: url("@/assets/img/foundation/small-tomato.svg");
+  }
+}
+
+.pizza__wrapper {
+  width: 100%;
+  padding-bottom: 100%;
+}
+
+.pizza__filling {
+  $bl: &;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+
+  &::before,
+  &::after {
+    display: none;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    content: "";
+
+    background-image: inherit;
+  }
+
+  &--second {
+    &::before {
+      display: block;
+
+      transform: rotate(45deg);
+    }
+  }
+
+  &--third {
+    &::before {
+      display: block;
+
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      display: block;
+
+      transform: rotate(-45deg);
+    }
+  }
+
+  &--ananas,
+  &--ananas.pizza__filling--second::before,
+  &--ananas.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/ananas.svg");
+  }
+
+  &--bacon,
+  &--bacon.pizza__filling--second::before,
+  &--bacon.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/bacon.svg");
+  }
+
+  &--blue_cheese,
+  &--blue.pizza__filling--second::before,
+  &--blue.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/blue_cheese.svg");
+  }
+
+  &--cheddar,
+  &--cheddar.pizza__filling--second::before,
+  &--cheddar.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/cheddar.svg");
+  }
+
+  &--chile,
+  &--chile.pizza__filling--second::before,
+  &--chile.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/chile.svg");
+  }
+
+  &--ham,
+  &--ham.pizza__filling--second::before,
+  &--ham.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/ham.svg");
+  }
+
+  &--jalapeno,
+  &--jalapeno.pizza__filling--second::before,
+  &--jalapeno.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/jalapeno.svg");
+  }
+
+  &--mozzarella,
+  &--mozzarella.pizza__filling--second::before,
+  &--mozzarella.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/mozzarella.svg");
+  }
+
+  &--mushrooms,
+  &--mushrooms.pizza__filling--second::before,
+  &--mushrooms.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/mushrooms.svg");
+  }
+
+  &--olives,
+  &--olives.pizza__filling--second::before,
+  &--olives.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/olives.svg");
+  }
+
+  &--onion,
+  &--onion.pizza__filling--second::before,
+  &--onion.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/onion.svg");
+  }
+
+  &--parmesan,
+  &--parmesan.pizza__filling--second::before,
+  &--parmesan.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/parmesan.svg");
+  }
+
+  &--salami,
+  &---salami.pizza__filling--second::before,
+  &---salami.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/salami.svg");
+  }
+
+  &--salmon,
+  &--salmon.pizza__filling--second::before,
+  &--salmon.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/salmon.svg");
+  }
+
+  &--tomatoes,
+  &--tomatoes.pizza__filling--second::before,
+  &--tomatoes.pizza__filling--third::after {
+    background-image: url("@/assets/img/filling-big/tomatoes.svg");
+  }
+}
+
+.input {
+  display: block;
+
+  span {
+    @include r-s14-h16;
+
+    display: block;
+
+    margin-bottom: 4px;
+  }
+
+  input {
+    @include r-s16-h19;
+
+    display: block;
+
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 8px 16px;
+
+    transition: 0.3s;
+
+    color: $black;
+    border: 1px solid $purple-400;
+    border-radius: 8px;
+    outline: none;
+    background-color: $white;
+
+    font-family: inherit;
+
+    &:focus {
+      border-color: $green-500;
+    }
+  }
+
+  &:hover {
+    input {
+      border-color: $black;
+    }
+  }
+
+  &--big-label {
+    display: flex;
+    align-items: center;
+
+    span {
+      @include b-s16-h19;
+
+      margin-right: 16px;
+
+      white-space: nowrap;
+    }
+  }
+}
+</style>
\ No newline at end of file