diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2f88d12a..98cb52b9 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,62 +1,13 @@
 <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>
+    <router-view />
+  </app-layout>
 </template>
 
+<script setup>
+import AppLayout from "@/layouts/AppLayout.vue";
+</script>
+
 <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;
-  }
-}
-
 </style>
diff --git a/frontend/src/assets/scss/app.scss b/frontend/src/assets/scss/app.scss
index 9d86ab36..e13cadf9 100644
--- a/frontend/src/assets/scss/app.scss
+++ b/frontend/src/assets/scss/app.scss
@@ -1,7 +1,5 @@
-// general
 @import "libs/normalize.scss";
+@import "common.scss";
 @import "fonts.scss";
-@import "ds-system/ds.scss";
-@import "visually-hidden.scss";
 @import "scaffolding.scss";
-@import "mixins/mixins";
+@import "visually-hidden.scss";
\ No newline at end of file
diff --git a/frontend/src/assets/scss/common.scss b/frontend/src/assets/scss/common.scss
new file mode 100644
index 00000000..5d06db4d
--- /dev/null
+++ b/frontend/src/assets/scss/common.scss
@@ -0,0 +1,289 @@
+@import "ds-system/ds.scss";
+@import "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%;
+}
+
+.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);
+}
+
+.title {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+
+  color: $black;
+
+  &--big {
+    @include b-s36-h42;
+  }
+
+  &--small {
+    @include b-s18-h21;
+  }
+}
+
+.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;
+        }
+      }
+    }
+  }
+}
+
+.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;
+  }
+}
+
+.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;
+    }
+  }
+}
+
+.container {
+  width: 770px;
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/frontend/src/common/components/AppCounter.vue b/frontend/src/common/components/AppCounter.vue
new file mode 100644
index 00000000..48861838
--- /dev/null
+++ b/frontend/src/common/components/AppCounter.vue
@@ -0,0 +1,199 @@
+<template>
+    <div class="counter">
+      <button
+        type="button"
+        class="counter__button counter__button--minus"
+        :disabled="value === min"
+        @click="emit('input', value - 1)"
+      >
+        <span class="visually-hidden">Меньше</span>
+      </button>
+      <input
+        type="text"
+        name="counter"
+        class="counter__input"
+        :value="value"
+        @input="emit('input', Number($event.target.value))"
+      />
+      <button
+        type="button"
+        class="counter__button counter__button--plus"
+        :class="{ 'counter__button--orange': accent }"
+        :disabled="value === max"
+        @click="emit('input', value + 1)"
+      >
+        <span class="visually-hidden">Больше</span>
+      </button>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    value: {
+      type: Number,
+      required: true,
+    },
+    accent: {
+      type: Boolean,
+      default: false,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+  });
+  
+  const emit = defineEmits(["input"]);
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/ds-system/ds.scss";
+  @import "@/assets/scss/mixins/mixins.scss";
+  
+  .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;
+    }
+  }
+  </style>
\ No newline at end of file
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..fd81a0d6
--- /dev/null
+++ b/frontend/src/common/constants/index.js
@@ -0,0 +1,2 @@
+export const DATA_TRANSFER_PAYLOAD = "payload";
+export const MAX_INGREDIENT_COUNT = 3;
\ No newline at end of file
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/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
new file mode 100644
index 00000000..798bcd83
--- /dev/null
+++ b/frontend/src/layouts/AppLayout.vue
@@ -0,0 +1,36 @@
+<template>
+  <component :is="layout">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { shallowRef, watch } from "vue";
+import { useRoute } from "vue-router";
+import AppLayoutDefault from "@/layouts/DefaultLayout.vue";
+
+const route = useRoute();
+const layout = shallowRef(null);
+
+// Наблюдаем за изменением маршрута
+watch(
+  () => route.meta,
+  async (meta) => {
+    try {
+      if (meta.layout) {
+        // Пробуем найти компонент из свойства meta и динамически импортировать его
+        const component = await import(`./${meta.layout}.vue`);
+        layout.value = component?.default || AppLayoutDefault;
+      } else {
+        layout.value = AppLayoutDefault;
+      }
+    } catch (e) {
+      console.error(
+        "Динамический шаблон не найден. Установлен шаблон по-умолчанию.",
+        e,
+      );
+      layout.value = AppLayoutDefault;
+    }
+  },
+);
+</script>
diff --git a/frontend/src/layouts/DefaultHeader.vue b/frontend/src/layouts/DefaultHeader.vue
new file mode 100644
index 00000000..e9524cb7
--- /dev/null
+++ b/frontend/src/layouts/DefaultHeader.vue
@@ -0,0 +1,176 @@
+<template>
+  <header class="header">
+    <div class="header__logo">
+      <router-link :to="{ name: 'home' }" class="logo">
+        <img
+          src="@/assets/img/logo.svg"
+          alt="V!U!E! Pizza logo"
+          width="90"
+          height="40"
+        />
+      </router-link>
+    </div>
+    <div class="header__cart">
+      <router-link :to="{ name: 'cart' }">0 ₽</router-link>
+    </div>
+    <div class="header__user">
+      <router-link :to="{ name: 'profile' }">
+        <picture>
+          <source
+            type="image/webp"
+            srcset="
+              @/assets/img/users/user5.webp    1x,
+              @/assets/img/users/user5@2x.webp 2x
+            "
+          />
+          <img
+            src="@/assets/img/users/user5.jpg"
+            srcset="@/assets/img/users/user5@2x.jpg"
+            alt="Василий Ложкин"
+            width="32"
+            height="32"
+          />
+        </picture>
+        <span>Василий Ложкин</span>
+      </router-link>
+      <router-link :to="{ name: 'home' }" class="header__logout">
+        <span>Выйти</span>
+      </router-link>
+    </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/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
new file mode 100644
index 00000000..94b51013
--- /dev/null
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="default-layout">
+    <default-header />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import DefaultHeader from "./DefaultHeader.vue";
+</script>
+
+<style lang="scss" scoped>
+.default-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+</style>
diff --git a/frontend/src/layouts/SimpleLayout.vue b/frontend/src/layouts/SimpleLayout.vue
new file mode 100644
index 00000000..ba4672f5
--- /dev/null
+++ b/frontend/src/layouts/SimpleLayout.vue
@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 786af441..a090886d 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,12 +1,13 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import router from "@/router";
 
 import App from "./App.vue";
-import router from "./router";
 
 const app = createApp(App);
 
 app.use(createPinia());
+
 app.use(router);
 
 app.mount("#app");
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..c4d32f2d
--- /dev/null
+++ b/frontend/src/modules/constructor/SauceSelector.vue
@@ -0,0 +1,61 @@
+<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/router/index.js b/frontend/src/router/index.js
index 6c13dc55..26c56f0b 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,8 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";
+import {routes} from './routes';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes,
 });
 
 export default router;
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
new file mode 100644
index 00000000..b57c4236
--- /dev/null
+++ b/frontend/src/router/routes.js
@@ -0,0 +1,38 @@
+export const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: () => import("@/views/HomeView.vue"),
+    meta: { layout: "DefaultLayout" },
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: () => import("@/views/LoginView.vue"),
+    meta: { layout: "SimpleLayout" },
+  },
+  {
+    path: "/cart",
+    name: "cart",
+    component: () => import("@/views/CartView.vue"),
+    meta: { layout: "DefaultLayout" },
+  },
+  {
+    path: "/user",
+    name: "user",
+    component: () => import("@/views/UserView.vue"),
+    meta: { layout: "DefaultLayout" },
+    children: [
+      {
+        path: "orders",
+        name: "orders",
+        component: () => import("@/views/OrdersView.vue"),
+      },
+      {
+        path: "profile",
+        name: "profile",
+        component: () => import("@/views/ProfileView.vue"),
+      },
+    ],
+  },
+];
diff --git a/frontend/src/views/CartView.vue b/frontend/src/views/CartView.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 00000000..d5ca267e
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,156 @@
+<template>
+  <main class="content">
+    <form action="#" method="post">
+      <div class="content__wrapper">
+        <h1 class="title title--big">Конструктор пиццы</h1>
+
+        <dough-selector v-model="pizza.dough" :items="doughItems" />
+
+        <diameter-selector v-model="pizza.size" :items="sizeItems" />
+
+        <div class="content__ingredients">
+          <div class="sheet">
+            <h2 class="title title--small sheet__title">
+              Выберите ингредиенты
+            </h2>
+
+            <div class="sheet__content ingredients">
+              <sauce-selector v-model="pizza.sauce" :items="sauceItems" />
+
+              <ingredients-selector :values="pizza.ingredients" :items="ingredientItems"
+                @update="updateIngredientAmount" />
+            </div>
+          </div>
+        </div>
+
+        <div class="content__pizza">
+          <label class="input">
+            <span class="visually-hidden">Название пиццы</span>
+            <input v-model="pizza.name" type="text" name="pizza_name" placeholder="Введите название пиццы" />
+          </label>
+
+          <pizza-constructor
+            :dough="pizza.dough"
+            :sauce="pizza.sauce"
+            :ingredients="pizza.ingredients"
+            @drop="addIngredient" />
+
+          <div class="content__result">
+            <p>Итого: {{ price }} ₽</p>
+            <button type="button" class="button" :disabled="disableSubmit">
+              Готовьте!
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </main>
+</template>
+
+<script setup>
+import { computed, reactive } from "vue";
+import {
+  normalizeDough,
+  normalizeIngredients,
+  normalizeSauces,
+  normalizeSize,
+} from "@/common/helpers/normalize";
+import DoughSelector from "@/modules/constructor/DoughSelector.vue";
+import DiameterSelector from "@/modules/constructor/DiameterSelector.vue";
+import SauceSelector from "@/modules/constructor/SauceSelector.vue";
+import IngredientsSelector from "@/modules/constructor/IngredientsSelector.vue";
+import PizzaConstructor from "@/modules/constructor/PizzaConstructor.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].value,
+  size: sizeItems[0].value,
+  sauce: sauceItems[0].value,
+  ingredients: ingredientItems.reduce((acc, item) => {
+    acc[item.value] = 0;
+    return acc;
+  }, {}),
+});
+
+const price = computed(() => {
+  const { dough, size, sauce, ingredients } = pizza;
+
+  const sizeMultiplier =
+    sizeItems.find((item) => item.value === size)?.multiplier ?? 1;
+
+  const doughPrice =
+    doughItems.find((item) => item.value === dough)?.price ?? 0;
+
+  const saucePrice =
+    sauceItems.find((item) => item.value === sauce)?.price ?? 0;
+
+  /*
+   * Здесь мы при помощи метода map превращаем массив ингредиентов
+   * в массив значений, соответствующих итоговой стоимости каждого из них - просто умножив известную цену на количество.
+   * После чего методом reduce вычисляем сумму всех элементов массива, что даст нам общую стоимость всех ингредиентов.
+   */
+  const ingredientsPrice = ingredientItems
+    .map((item) => ingredients[item.value] * item.price)
+    .reduce((acc, item) => acc + item, 0);
+
+  return (doughPrice + saucePrice + ingredientsPrice) * sizeMultiplier;
+});
+
+const disableSubmit = computed(() => {
+  return pizza.name.length === 0 || price.value === 0;
+});
+
+const addIngredient = (ingredient) => {
+  pizza.ingredients[ingredient]++;
+};
+
+const updateIngredientAmount = (ingredient, count) => {
+  pizza.ingredients[ingredient] = count;
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/ds-system/ds.scss";
+@import "@/assets/scss/mixins/mixins.scss";
+
+.content__ingredients {
+  width: 527px;
+  margin-top: 15px;
+  margin-right: auto;
+  margin-bottom: 15px;
+}
+
+.content__pizza {
+  width: 373px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.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;
+  }
+}
+</style>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/views/OrdersView.vue b/frontend/src/views/OrdersView.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
new file mode 100644
index 00000000..e69de29b