diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2f88d12a..a77a715f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,62 +1,17 @@
 <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>
 
-<style lang="scss">
-@import "@/assets/scss/app.scss";
-body {
-  justify-content: center;
-  align-items: center;
-}
-.main__wrapper {
-  padding-bottom: 30px;
-
-  background-color: $white;
-  box-shadow: $shadow-light;
-
-  h1 {
-    margin-bottom: 0;
-    padding: 0 95px;
-
-    text-align: center;
-
-    @include b-s36-h42;
-  }
-
-  p {
-    padding: 0 95px;
-
-    text-align: center;
-
-    font-size: 20px;
-    line-height: 30px;
-  }
-
-  b {
-    font-size: 1.2em;
-  }
-}
-
-.main__header {
-  margin-bottom: 30px;
-  padding: 20px 0;
-
-  background-color: $green-600;
-
-  img {
-    display: block;
-
-    margin: 0 auto;
-  }
+<script>
+import { AppLayout } from "@/layouts";
+import { HomeView } from "@/views";
+export default {
+  components: {HomeView, AppLayout}
 }
+</script>
 
+<style lang="scss">
+@import "@/assets/scss/app.scss";
 </style>
diff --git a/frontend/src/common/components/AppDrag.vue b/frontend/src/common/components/AppDrag.vue
new file mode 100644
index 00000000..feaaee0d
--- /dev/null
+++ b/frontend/src/common/components/AppDrag.vue
@@ -0,0 +1,34 @@
+<template>
+  <div
+      :draggable="draggable"
+      @dragstart.self="onDrag"
+      @dragover.prevent
+      @dragend.prevent
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { DATA_TRANSFER_PAYLOAD, MOVE } from '../constants'
+
+const props = defineProps({
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
+  transferData: {
+    type: Object,
+    required: true
+  }
+})
+
+const onDrag = ({ dataTransfer }) => {
+  dataTransfer.effectAllowed = MOVE;
+  dataTransfer.dropEffect = MOVE;
+  dataTransfer.setData(
+      DATA_TRANSFER_PAYLOAD,
+      JSON.stringify(props.transferData)
+  )
+}
+</script>
diff --git a/frontend/src/common/components/AppDrop.vue b/frontend/src/common/components/AppDrop.vue
new file mode 100644
index 00000000..b10abaf7
--- /dev/null
+++ b/frontend/src/common/components/AppDrop.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+   @drop.stop="onDrop"
+   @dragover.prevent
+   @dragenter.prevent
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { DATA_TRANSFER_PAYLOAD } from '../constants'
+
+const emit = defineEmits(['drop'])
+
+const onDrop = ({ dataTransfer }) => {
+  if (!dataTransfer) return;
+  
+  try {
+    const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+    if (payload) {
+      const transferData = JSON.parse(payload);
+      emit('drop', transferData);
+    }
+  } catch (e) {
+    console.error('Error parsing drop data:', e);
+  }
+}
+</script>
diff --git a/frontend/src/common/components/DoughSelector.vue b/frontend/src/common/components/DoughSelector.vue
new file mode 100644
index 00000000..ab7af246
--- /dev/null
+++ b/frontend/src/common/components/DoughSelector.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="content__dough">
+    <div class="sheet">
+      <h2 class="title title--small sheet__title">Выберите тесто</h2>
+      <div class="sheet__content dough">
+        <label
+            v-for="doughType in doughItems"
+            class="dough__input"
+            :class="`dough__input--${doughType.value}`"
+            :key="doughType.id"
+        >
+          <input
+              type="radio"
+              name="dought"
+              :value="doughType.value"
+              class="visually-hidden"
+              :checked="doughType.id === modelValue?.id"
+              @change="$emit('update:modelValue', doughType)"
+          />
+          <img :src="getImage(doughType.image)" :alt="doughType.name" />
+          <b>{{ doughType.name }}</b>
+          <span>{{ doughType.description }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch } from 'vue';
+
+const props = defineProps({
+  doughItems: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Object
+  }
+})
+
+defineEmits(['update:modelValue']);
+
+const getImage = (image) => {
+  return new URL(`../../assets/img/${image}`, import.meta.url).href;
+};
+
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dough__input {
+  position: relative;
+  margin-right: 8%;
+  margin-bottom: 20px;
+  padding-left: 50px;
+  cursor: pointer;
+}
+
+.dough__input img {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 36px;
+  height: 36px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  transition: box-shadow 0.3s;
+}
+
+.dough__input b {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.dough__input span {
+  font-size: 11px;
+  display: block;
+}
+
+.dough__input:hover img {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.dough__input input:checked + img {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/frontend/src/common/components/IngredientsSelector.vue b/frontend/src/common/components/IngredientsSelector.vue
new file mode 100644
index 00000000..d9ec07f5
--- /dev/null
+++ b/frontend/src/common/components/IngredientsSelector.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="ingredients__filling">
+    <p>Начинка:</p>
+    <ul class="ingredients__list">
+      <li
+          v-for="ingredient in ingredientItems"
+          class="ingredients__item"
+          :key="ingredient.id"
+      >
+        <AppDrag 
+          :transferData="ingredient" 
+          :draggable="canDrag(ingredient)"
+        >
+           <span class="filling" :class="`filling--${ingredient.name}`" style="display: inline-block;">
+              <img :src="getImage(ingredient.image)" :alt="ingredient.name" draggable="false">
+              {{ ingredient.name }}
+            </span>
+        </AppDrag>
+        <div class="counter counter--orange ingredients__counter">
+          <button 
+            type="button" 
+            class="counter__button counter__button--minus" 
+            :disabled="getCount(ingredient.id) <= 0"
+            @click="decrement(ingredient.id)"
+          >
+            <span class="visually-hidden">Меньше</span>
+          </button>
+          <input 
+            type="text" 
+            name="counter" 
+            class="counter__input" 
+            :value="getCount(ingredient.id)"
+            @input="handleInput($event, ingredient.id)"
+          />
+          <button 
+            type="button" 
+            class="counter__button counter__button--plus"
+            :disabled="getCount(ingredient.id) >= 3"
+            @click="increment(ingredient.id)"
+          >
+            <span class="visually-hidden">Больше</span>
+          </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import {defineProps} from "vue";
+import AppDrag from "@/common/components/AppDrag.vue";
+
+const props = defineProps({
+  ingredientItems: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const getCount = (ingredientId) => {
+  return props.modelValue[ingredientId]?.count || 0;
+};
+
+const canDrag = (ingredient) => {
+  return getCount(ingredient.id) < 3;
+};
+
+const increment = (ingredientId) => {
+  const currentCount = getCount(ingredientId);
+  if (currentCount < 3) {
+    updateCount(ingredientId, currentCount + 1);
+  }
+};
+
+const decrement = (ingredientId) => {
+  const currentCount = getCount(ingredientId);
+  if (currentCount > 0) {
+    updateCount(ingredientId, currentCount - 1);
+  }
+};
+
+const handleInput = (event, ingredientId) => {
+  const value = parseInt(event.target.value);
+  if (!isNaN(value) && value >= 0 && value <= 3) {
+    updateCount(ingredientId, value);
+  }
+};
+
+const updateCount = (ingredientId, newCount) => {
+  const updatedValue = { ...props.modelValue };
+  updatedValue[ingredientId] = {
+    ...updatedValue[ingredientId],
+    count: newCount
+  };
+  emit('update:modelValue', updatedValue);
+};
+
+const handleDragEnd = (ingredient) => {
+  if (canDrag(ingredient)) {
+    increment(ingredient.id);
+  }
+};
+
+const getImage = (image) => {
+  return new URL(`../../assets/img/${image}`, import.meta.url).href;
+};
+</script>
+
+<style scoped>
+
+.ingredients__filling {
+  width: 100%;
+}
+
+.ingredients__filling p {
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.ingredients__list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ingredients__item {
+  width: 100px;
+  margin-right: 17px;
+  margin-bottom: 35px;
+}
+
+.filling {
+  display: block;
+  padding-left: 36px;
+  position: relative;
+  font-size: 14px;
+}
+
+.filling img {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+}
+
+.counter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 54px;
+  margin-top: 10px;
+  margin-left: 36px;
+}
+
+.counter__button {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.counter__button--minus {
+  background-color: #f0e6ff;
+}
+
+.counter__button--plus {
+  background-color: #6c5ce7;
+}
+
+.counter__input {
+  width: 22px;
+  text-align: center;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+</style>
diff --git a/frontend/src/common/components/PizzaDisplay.vue b/frontend/src/common/components/PizzaDisplay.vue
new file mode 100644
index 00000000..64ab54f0
--- /dev/null
+++ b/frontend/src/common/components/PizzaDisplay.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="content__pizza">
+    <label class="input">
+      <span class="visually-hidden">Название пиццы</span>
+      <input 
+        type="text" 
+        name="pizza_name" 
+        placeholder="Введите название пиццы"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+    </label>
+    <div class="content__constructor">
+      <AppDrop @drop="onDropIngredient">
+        <div 
+          class="pizza" 
+          :class="`pizza--foundation--${dough?.value}-${sauce?.value}`"
+        >
+          <div class="pizza__wrapper">
+            <!-- Отображаем выбранные ингредиенты -->
+            <div
+              v-for="(ingredient, index) in ingredients"
+              :key="index"
+              class="pizza__filling"
+              :class="[
+                `pizza__filling--${ingredient.value}`,
+                ingredient.quantity === TWO_INGREDIENTS && 'pizza__filling--second',
+                ingredient.quantity === THREE_INGREDIENTS && 'pizza__filling--third',
+              ]"
+            >
+            </div>
+          </div>
+        </div>
+      </AppDrop>
+    </div>
+    <div class="content__result">
+      <p>Итого: {{ totalPrice }} ₽</p>
+      <button
+        type="button"
+        class="button"
+        :disabled="!isFormValid"
+      >
+        Готовьте!
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import AppDrop from "@/common/components/AppDrop.vue";
+
+const props = defineProps({
+  dough: {
+    type: Object
+  },
+  sauce: {
+    type: Object
+  },
+  size: {
+    type: Object
+  },
+  ingredients: {
+    type: Array
+  },
+  modelValue: {
+    type: String
+  }
+});
+
+const totalPrice = computed(() => {
+  if (!props.size) return 0;
+  
+  // Сумма ингредиентов
+  const ingredientsSum = props.ingredients.reduce(
+    (sum, ing) => sum + (ing.price * ing.quantity),
+    0
+  );
+  
+  // Берем цены напрямую из объектов
+  return props.size.multiplier * (props.dough.price + props.sauce.price + ingredientsSum);
+});
+
+// Проверка валидности формы
+const isFormValid = computed(() => {
+  return props.modelValue.trim() !== '' && totalPrice.value > 0;
+});
+
+const emit = defineEmits(['add-ingredient']);
+
+const TWO_INGREDIENTS = 2;
+const THREE_INGREDIENTS = 3;
+
+const onDropIngredient = (ingredient) => {
+  emit('add-ingredient', ingredient);
+};
+</script>
+
+<style scoped>
+.content__pizza {
+  width: 373px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.content__constructor {
+  width: 315px;
+  margin: 25px auto;
+}
+
+.pizza {
+  position: relative;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.pizza--foundation--big-tomato {
+  background-image: url("@/assets/img/foundation/big-tomato.svg");
+}
+
+.pizza__wrapper {
+  width: 100%;
+  padding-bottom: 100%;
+}
+
+.pizza__filling {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.pizza__filling--ananas {
+  background-image: url("@/assets/img/filling-big/ananas.svg");
+}
+
+.pizza__filling--bacon {
+  background-image: url("@/assets/img/filling-big/bacon.svg");
+}
+
+.pizza__filling--cheddar {
+  background-image: url("@/assets/img/filling-big/cheddar.svg");
+}
+
+.content__result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 25px;
+}
+
+.content__result p {
+  font-size: 24px;
+  margin: 0;
+}
+
+.content__result button {
+  margin-left: 12px;
+  padding: 16px 45px;
+  background-color: #6c5ce7;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.content__result button:disabled {
+  background-color: #a5b1c2;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/common/components/SauceSelector.vue b/frontend/src/common/components/SauceSelector.vue
new file mode 100644
index 00000000..d71f49f1
--- /dev/null
+++ b/frontend/src/common/components/SauceSelector.vue
@@ -0,0 +1,103 @@
+<template>
+    <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" 
+            :checked="sauceType.id === modelValue?.id"
+            @change="$emit('update:modelValue', sauceType)"
+          />
+          <span>{{ sauceType.name }}</span>
+        </label>
+  </div>
+</template>
+
+<script setup>
+defineEmits(['update:modelValue']);
+
+const props = defineProps({
+  sauceItems: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Object
+  }
+});
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.ingredients__sauce {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-bottom: 14px;
+}
+
+.ingredients__sauce p {
+  font-size: 16px;
+  margin-right: 16px;
+  margin-bottom: 10px;
+}
+
+.ingredients__input {
+  margin-right: 24px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.ingredients__input span {
+  font-size: 16px;
+  padding-left: 28px;
+  position: relative;
+}
+
+.ingredients__input span::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  border: 1px solid #7e72f2;
+  border-radius: 50%;
+  background-color: white;
+  transition: border-color 0.3s;
+}
+
+.ingredients__input:hover span::before {
+  border-color: #5c4ac7;
+}
+
+.ingredients__input input:checked + span::before {
+  border: 6px solid #6c5ce7;
+}
+</style>
diff --git a/frontend/src/common/components/SizeSelector.vue b/frontend/src/common/components/SizeSelector.vue
new file mode 100644
index 00000000..811f0207
--- /dev/null
+++ b/frontend/src/common/components/SizeSelector.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="content__diameter">
+    <div class="sheet">
+      <h2 class="title title--small sheet__title">Выберите размер</h2>
+      <div class="sheet__content diameter">
+        <label
+            v-for="sizeType in sizeItems"
+            class="diameter__input diameter__input--small"
+            :class="`diameter__input--${sizeType.value}`"
+            :key="sizeType.id"
+        >
+          <input
+              type="radio"
+              name="diameter"
+              :value="sizeType.value"
+              class="visually-hidden"
+              :checked="sizeType.id === modelValue?.id"
+              @change="$emit('update:modelValue', sizeType)"
+          />
+          <span>{{ sizeType.name }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  sizeItems: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Object
+  }
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<style scoped>
+.sheet {
+  padding-top: 15px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sheet__title {
+  padding: 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.sheet__content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 18px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.diameter__input {
+  margin-right: 8.7%;
+  margin-bottom: 20px;
+  padding-top: 7px;
+  padding-bottom: 6px;
+  cursor: pointer;
+}
+
+.diameter__input span {
+  position: relative;
+  padding-left: 46px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.diameter__input span::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 36px;
+  height: 36px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background-color: #e5f5e0;
+  background-image: url("@/assets/img/diameter.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: box-shadow 0.3s;
+}
+
+.diameter__input:hover span::before {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.diameter__input input:checked + span::before {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/frontend/src/common/constants.js b/frontend/src/common/constants.js
new file mode 100644
index 00000000..0cd8fcf8
--- /dev/null
+++ b/frontend/src/common/constants.js
@@ -0,0 +1,2 @@
+export const MOVE = 'move';
+export const DATA_TRANSFER_PAYLOAD = 'payload';
diff --git a/frontend/src/common/data/doughSizes.js b/frontend/src/common/data/doughSizes.js
index 2495107b..b34269ff 100644
--- a/frontend/src/common/data/doughSizes.js
+++ b/frontend/src/common/data/doughSizes.js
@@ -1,4 +1,4 @@
 export default {
-  1: "light",
-  2: "large",
+  1: "small",
+  2: "big",
 };
diff --git a/frontend/src/common/helpers/normalize.js b/frontend/src/common/helpers/normalize.js
new file mode 100644
index 00000000..c52872b1
--- /dev/null
+++ b/frontend/src/common/helpers/normalize.js
@@ -0,0 +1,33 @@
+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],
+  };
+};
diff --git a/frontend/src/layouts/AppHeader.vue b/frontend/src/layouts/AppHeader.vue
new file mode 100644
index 00000000..c244a96f
--- /dev/null
+++ b/frontend/src/layouts/AppHeader.vue
@@ -0,0 +1,151 @@
+<template>
+  <header class="header">
+    <div class="header__logo">
+      <a href="index.html" class="logo">
+        <img src="@/assets/img/logo.svg" alt="V!U!E! 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>
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
new file mode 100644
index 00000000..3fdf59c7
--- /dev/null
+++ b/frontend/src/layouts/AppLayout.vue
@@ -0,0 +1,7 @@
+<template>
+  <app-header></app-header>
+  <slot />
+</template>
+<script setup>
+import AppHeader from "./AppHeader.vue";
+</script>
diff --git a/frontend/src/layouts/index.js b/frontend/src/layouts/index.js
new file mode 100644
index 00000000..bb6d74fc
--- /dev/null
+++ b/frontend/src/layouts/index.js
@@ -0,0 +1 @@
+export { default as AppLayout } from "./AppLayout.vue";
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 00000000..abccafd9
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,958 @@
+<template>
+  <main class="content">
+    <form action="#" method="post">
+
+      <div class="content__wrapper">
+        <h1 class="title title--big">Конструктор пиццы</h1>
+
+        <!-- Компонент выбора теста -->
+        <DoughSelector 
+          :doughItems="doughItems"
+          v-model:modelValue="pizza.dough"
+        />
+
+        <!-- Компонент выбора размера -->
+        <SizeSelector 
+          :sizeItems="sizeItems"
+          v-model:modelValue="pizza.size"
+        />
+
+    
+        <div class="content__ingredients">
+          <div class="sheet">
+            <h2 class="title title--small sheet__title">Выберите ингредиенты</h2>
+            <div class="sheet__content ingredients">
+              <SauceSelector 
+                :sauceItems="sauceItems"
+                v-model:modelValue="pizza.sauce"
+              />
+              <IngredientsSelector 
+                :ingredientItems="ingredientItems"
+                v-model:modelValue="pizza.ingredients"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Компонент отображения пиццы -->
+        <PizzaDisplay
+          :dough="pizza.dough"
+          :sauce="pizza.sauce"
+          :ingredients="selectedIngredients"
+          :size="pizza.size"
+          v-model="pizza.name"
+          @add-ingredient="handleAddIngredient"
+         />
+      </div>
+
+    </form>
+  </main>
+</template>
+
+
+<script setup>
+import { computed, reactive } from 'vue';
+import {
+  normalizeDough,
+  normalizeIngredients,
+  normalizeSauces,
+  normalizeSize,
+} from "@/common/helpers/normalize";
+
+import DoughSelector from "@/common/components/DoughSelector.vue";
+import SauceSelector  from "@/common/components/SauceSelector.vue";
+import IngredientsSelector  from "@/common/components/IngredientsSelector.vue";
+import SizeSelector from "@/common/components/SizeSelector.vue";
+import PizzaDisplay from "@/common/components/PizzaDisplay.vue";
+
+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 pizza = reactive({
+  name: "",
+  dough: doughItems[0],
+  size: sizeItems[0],
+  sauce: sauceItems[0],
+  ingredients: ingredientItems.reduce((acc, item) => {
+    acc[item.id] = {
+      ingredient: item,
+      count: 0
+    };
+    return acc;
+  }, {})
+});
+
+// Вычисляемое свойство для отображения выбранных ингредиентов
+const selectedIngredients = computed(() => {
+  return Object.values(pizza.ingredients)
+    .filter(item => item.count > 0)
+    .map(item => ({
+      ...item.ingredient,
+      quantity: item.count
+    }));
+});
+
+const handleAddIngredient = (ingredient) => {
+  if (pizza.ingredients[ingredient.id].count < 3) {
+    pizza.ingredients[ingredient.id].count++;
+  }
+};
+
+
+</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>
diff --git a/frontend/src/views/index.js b/frontend/src/views/index.js
new file mode 100644
index 00000000..99bfdf65
--- /dev/null
+++ b/frontend/src/views/index.js
@@ -0,0 +1 @@
+export { default as HomeView } from "./HomeView.vue";