diff --git a/frontend/src/api/endpoint.ts b/frontend/src/api/endpoint.ts
index adbc0e4..b7e151b 100644
--- a/frontend/src/api/endpoint.ts
+++ b/frontend/src/api/endpoint.ts
@@ -15,4 +15,5 @@ export const uploadDumpsPath = '/v1/dumps'
 export const exportDumpsPath = '/v1/dumps'
 export const getAllOrdersPath = '/v1/orders'
 export const updateOrdersPath = (id: string) => `/v1/orders/${id}`
+export const createOrderPath = '/v1/orders'
 export const getAllServicesPath = '/v1/services'
diff --git a/frontend/src/api/models/address.ts b/frontend/src/api/models/address.ts
index 84e4fed..4cdbbde 100644
--- a/frontend/src/api/models/address.ts
+++ b/frontend/src/api/models/address.ts
@@ -1,12 +1,12 @@
 interface Address {
-  id: string;
+  id?: string;
   city: string;
   street: string;
   building: string;
   entrance: string;
   floor: string;
   door_number: string;
-  created_at: Date;
+  created_at?: Date;
   updated_at?: Date;
 }
 
diff --git a/frontend/src/api/models/order.ts b/frontend/src/api/models/order.ts
index 9969cc8..9c4a310 100644
--- a/frontend/src/api/models/order.ts
+++ b/frontend/src/api/models/order.ts
@@ -2,7 +2,7 @@ import Address from "./address";
 import StatusLog from "./statuslog";
 
 interface Order {
-  id: string;
+  id?: string;
   user_id: string;
   address: Address;
   date_time: Date;
@@ -12,12 +12,12 @@ interface Order {
   pollution: number;
   area: number;
   comment: string;
-  status: string;
-  status_logs: StatusLog[];
+  status?: string;
+  status_logs?: StatusLog[];
   services: string[];
   required_workers: number;
-  workers: string[];
-  created_at: Date;
+  workers?: string[];
+  created_at?: Date;
   updated_at?: Date;
 }
 
diff --git a/frontend/src/api/request.ts b/frontend/src/api/request.ts
index 6848eda..a34a255 100644
--- a/frontend/src/api/request.ts
+++ b/frontend/src/api/request.ts
@@ -22,7 +22,8 @@ import {
   exportDumpsPath,
   getAllOrdersPath,
   getAllServicesPath,
-  updateOrdersPath
+  updateOrdersPath,
+  createOrderPath
 } from './endpoint'
 import Order from './models/order'
 import Service from './models/service'
@@ -104,47 +105,23 @@ export function deleteUser(id: string): Promise<any> {
 }
 
 export async function getClientAddresses(id: string): Promise<Address[]> {
-  try {
-    const response = await fetch(baseURL+getClientAddressesPath(id), {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-  
-    if (!response.ok) {
-      throw new Error(`Error HTTP: ${response.status}`);
-    }
-  
-    const data = (await response.json()) as Address[];
-    return data;
-  } catch (error) {
-    console.error('Error request:', error);
-    throw error;
-  }
+  return axios.get(baseURL + getClientAddressesPath(id))
+  .then((response) => {
+    return Promise.resolve(response.data)
+  })
+  .catch((error) => {
+    return Promise.reject(error)
+  })
 }
 
 export async function createNewAddress(id: string, addressData: Address): Promise<Address> {
-  try {
-    const response = await fetch(baseURL+createNewAddressPath(id), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(addressData),
-    });
-  
-    if (!response.ok) {
-      throw new Error(`Error HTTP: ${response.status}`);
-    }
-  
-    const data = await response.json();
-    return data.id; 
-    
-  } catch (error) {
-    console.error('Error request:', error);
-    throw error;
-  }
+  return axios.post<Address>(baseURL + createNewAddressPath(id), addressData)
+  .then((response) => {
+    return Promise.resolve(response.data)
+  })
+  .catch((error) => {
+    return Promise.reject(error)
+  })
 }
 
 export function getClientAddress(id: string, address_id: string): Promise<Address> {
@@ -246,7 +223,7 @@ export async function getAllOrders(id: string | null): Promise<Order[]> {
 }
 
 export async function updateOrder(newOrder: Order): Promise<Order> {
-  return axios.put<Order>(baseURL + updateOrdersPath(newOrder.id), newOrder)
+  return axios.put<Order>(baseURL + updateOrdersPath(newOrder.id!), newOrder)
   .then((response) => {
     return response.data
   })
@@ -282,3 +259,22 @@ export async function filterOrder(filterData: FilterOrder): Promise<Order[]> {
   })
 }
 
+export async function createOrder(newOrder: Order): Promise<Order> {
+  return axios.post<Order>(baseURL + createOrderPath, newOrder)
+  .then((response) => {
+    return Promise.resolve(response.data)
+  })
+  .catch((error) => {
+    return Promise.reject(error)
+  })
+}
+
+export async function getOrderById(id: string): Promise<Order> {
+  return axios.get(baseURL + updateOrdersPath(id))
+  .then((response) => {
+    return Promise.resolve(response.data)
+  })
+  .catch((error) => {
+    return Promise.reject(error)
+  })
+}
\ No newline at end of file
diff --git a/frontend/src/components/admin/AdminMainPage.vue b/frontend/src/components/admin/AdminMainPage.vue
index e1734e2..1f88922 100644
--- a/frontend/src/components/admin/AdminMainPage.vue
+++ b/frontend/src/components/admin/AdminMainPage.vue
@@ -1,21 +1,7 @@
 <script setup lang="ts">
 import { inject, onMounted } from 'vue'
 import { RouterView } from 'vue-router'
-import { getUserInfo, getUsers } from '../../api/request'
-import { ref } from 'vue' 
-import { User } from '../../api/models/user'
-
-// const userStore = useUserStore()
-// const user = userStore.getUser()
-
-const clients = ref<User[]>([]);
-const workers = ref<User[]>([]);
-const headers = [
-  { text: 'ID', value: 'id' },
-  { text: 'Имя', value: 'name' },
-  { text: 'Email', value: 'email' },
-  // Добавьте другие заголовки по мере необходимости
-];
+import { getUserInfo } from '../../api/request'
 
 const addSideBarButtons: Function | undefined = inject('addSideBarButtons')
 const setUserCard: Function | undefined = inject('setUserCard')
diff --git a/frontend/src/components/admin/AdminOrdersPage.vue b/frontend/src/components/admin/AdminOrdersPage.vue
index cc05b77..9bd0e6f 100644
--- a/frontend/src/components/admin/AdminOrdersPage.vue
+++ b/frontend/src/components/admin/AdminOrdersPage.vue
@@ -160,7 +160,7 @@ onMounted(() => {
     <HeaderList
       title="Заказы" 
       :items="orders"
-      height="100%"
+      height="92%"
       width="95%"
     >
       <template #items="{ item }">
diff --git a/frontend/src/components/client/ClientAddressesPage.vue b/frontend/src/components/client/ClientAddressesPage.vue
index 98bda37..c4e672b 100644
--- a/frontend/src/components/client/ClientAddressesPage.vue
+++ b/frontend/src/components/client/ClientAddressesPage.vue
@@ -6,11 +6,17 @@ import MainContainer from '../../ui/uikit/containers/MainContainer.vue'
 import Dialog from '../../ui/uikit/Dialog.vue'
 import ActionButton from '../../ui/uikit/ActionButton.vue'
 import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
-import { getClientAddresses, createNewAddress } from '../../api/request'
+import { getClientAddresses, createNewAddress, getUserInfo } from '../../api/request'
 import Address from '../../api/models/address'
 
 onMounted(() => {
-  fetchClientAddresses("me")
+  getUserInfo('me')
+  .then((user) => {
+    getClientAddresses(user.id)
+    .then((response) => {
+      addresses.value = response
+    })
+  })
 })
 
 const addresses = ref<Address[]>([])
@@ -33,49 +39,28 @@ function closeDialog(): void {
   isDialogVisible.value = false
 }
 
-function formatAddress(item: any): string {
-  return `${item.city}, ${item.street}, ${item.building}, Подъезд ${item.entrance}, Этаж ${item.floor}, Квартира ${item.door_number}`;
-}
-
-async function fetchClientAddresses(clientId: string) {
-  getClientAddresses(clientId)
-  .then((response) => {
-    addresses.value = response
-  })
-  .catch((error) => {
-    console.error("Failed to fetch client addresses:", error)
+function submitNewAddress(): void {
+  getUserInfo('me').then((userId) => {
+    addNewAddress(userId.id)
   })
 }
 
-async function addNewAddress(clientId: string) {
+function addNewAddress(clientId: string) {
   closeDialog()
   const addressData: Address = {
-    id: clientId.toString(),
     city: newAddress.value.city,
     street: newAddress.value.street,
     building: newAddress.value.building,
     entrance: newAddress.value.entrance,
     floor: newAddress.value.floor,
     door_number: newAddress.value.door_number,
-    created_at: new Date(),
-    updated_at: new Date()
-  };
-  addresses.value.push(addressData);
-
+  }
   createNewAddress(clientId, addressData)
-  .then((newAddressId) => {
-    /* раскомментировать после добавления авторизации
-    addresses.value.push({
-      ...addressData, 
-      id: newAddressId
-    });
-    */
-  })
-  .catch((error) => {
-    console.error("Failed to createNewAddress:", error)
-    // addresses.value.pop() раскомментировать после добавления авторизации
+  .then((response) => {
+    addresses.value.push(addressData)
   })
 }
+
 </script>
 
 <template>
@@ -87,7 +72,7 @@ async function addNewAddress(clientId: string) {
       width="95%"
     >
       <template #items="{ item }">
-        <AddressItem :address="formatAddress(item)" />
+        <AddressItem :address="item" />
       </template>
     </HeaderList>
   </MainContainer>
@@ -119,7 +104,7 @@ async function addNewAddress(clientId: string) {
       <InputTextField
         v-model="newAddress.building"
         placeholder="Дом"
-        type="number"
+        type="text"
         label="Дом"
       ></InputTextField>
       <InputTextField
@@ -154,7 +139,7 @@ async function addNewAddress(clientId: string) {
         type="create"
         variant="flat"
         color="#394cc2"
-        @click="addNewAddress"
+        @click="submitNewAddress"
       ></ActionButton>
     </template>
   </Dialog>
diff --git a/frontend/src/components/client/ClientCreateOrderPage.vue b/frontend/src/components/client/ClientCreateOrderPage.vue
index 607d5af..f22af85 100644
--- a/frontend/src/components/client/ClientCreateOrderPage.vue
+++ b/frontend/src/components/client/ClientCreateOrderPage.vue
@@ -5,6 +5,12 @@ import ActionButton from '../../ui/uikit/ActionButton.vue'
 import Step1 from '../createOrderStep/ContactInfo.vue'
 import Step2 from '../createOrderStep/AppartmentInfo.vue'
 import Step3 from '../createOrderStep/ServiceInfo.vue'
+import { createOrder, getUserInfo } from '../../api/request'
+import Order from '../../api/models/order'
+import Service from '../../api/models/service'
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
 
 const currentStep: Ref<number> = ref(1)
 const steps: any = {
@@ -13,15 +19,88 @@ const steps: any = {
   3: Step3,
 }
 const currentStepComponent = computed(() => steps[currentStep.value])
+const currentPrice = ref<number>(0)
+const isFormValid = ref<boolean>(false)
+const userId = ref<string>('')
+const appartmentData = ref({
+  rooms: 0,
+  bathrooms: 0,
+  area: 0,
+  pollution: 0,
+  comment: "",
+})
+const addressData = ref({
+  city: "",
+  street: "",
+  building: "",
+  entrance: "",
+  floor: "",
+  doorNumber: "",
+  date: new Date(""),
+  time: ""
+})
+const selectedServices = ref<Service[]>([])
 
 function changeStep(): void {
   if (currentStep.value >= 3) {
-    // create order
-    // redirect to order history
+    getUserInfo('me').then((user) => {
+      userId.value = user.id
+      const [hours, minutes] = addressData.value.time.split(':').map(Number)
+      const dateWithTime = new Date(addressData.value.date)
+      dateWithTime.setHours(hours)
+      dateWithTime.setMinutes(minutes)
+      const requiredWorkers = Math.max(
+        ...selectedServices.value.map((service) => service.workers_quantity)
+      )
+      const newOrder: Order = {
+        user_id: userId.value,
+        address: {
+          city: addressData.value.city,
+          street: addressData.value.street,
+          building: addressData.value.building,
+          entrance: addressData.value.entrance,
+          floor: addressData.value.floor,
+          door_number: addressData.value.doorNumber,
+        },
+        date_time: dateWithTime,
+        area: appartmentData.value.area,
+        number_of_rooms: appartmentData.value.rooms,
+        number_of_bathrooms: appartmentData.value.bathrooms,
+        pollution: appartmentData.value.pollution,
+        comment: appartmentData.value.comment,
+        price: currentPrice.value,
+        required_workers: requiredWorkers,
+        services: selectedServices.value.map((service) => service.id),
+      }
+      createOrder(newOrder).then(() => {
+        router.push({ name: 'client-orders-history' })
+      })
+    })
   } else {
     currentStep.value += 1;
+    isFormValid.value = false
   }
 }
+
+function updateFormValidity(isValid: boolean): void {
+  isFormValid.value = isValid
+}
+
+function updateAppartmentData(data: any): void {
+  appartmentData.value = data;
+
+}
+function updateAddressData(data: any): void {
+  addressData.value = data;
+}
+
+function updatePrice(num: number): void {
+  currentPrice.value = num
+}
+
+function updateSelectedServices(services: Service[]): void {
+  selectedServices.value = services;
+}
 </script>
 
 <template>
@@ -30,7 +109,12 @@ function changeStep(): void {
   >
     <component
       :is="currentStepComponent"
-      @change-step="changeStep"
+      @update-form-validity="updateFormValidity"
+      @update-appartment-data="updateAppartmentData"
+      @update-address-data="updateAddressData"
+      @update-price="updatePrice"
+      @update-selected-services="updateSelectedServices"
+      :currentPrice="currentPrice"
     ></component>
     <ActionButton
       id="next-btn"
@@ -39,6 +123,7 @@ function changeStep(): void {
       variant="flat"
       color="#394cc2"
       :onClick="changeStep"
+      :disabled="!isFormValid"
     ></ActionButton>
   </MainContainer>
 </template>
diff --git a/frontend/src/components/client/ClientOrdersHistoryPage.vue b/frontend/src/components/client/ClientOrdersHistoryPage.vue
index dc8be20..adefb5e 100644
--- a/frontend/src/components/client/ClientOrdersHistoryPage.vue
+++ b/frontend/src/components/client/ClientOrdersHistoryPage.vue
@@ -6,7 +6,7 @@ import OrderItem from '../../ui/uikit/items/OrderItem.vue'
 import ActionButton from '../../ui/uikit/ActionButton.vue'
 import DateFilter from '../../ui/uikit/DateFilter.vue'
 import MainContainer from '../../ui/uikit/containers/MainContainer.vue'
-import { getAllOrders, getUserInfo } from '../../api/request'
+import { getAllOrders } from '../../api/request'
 import Order from '../../api/models/order'
 
 const orders = ref<Order[]>([])
@@ -54,18 +54,4 @@ onMounted(() => {
 </template>
 
 <style scoped>
-/* .container {
-  max-width: 100%;
-  max-height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 80%;
-  background-color: white;
-  gap: 20px;
-  padding-top: 20px;
-  padding-bottom: 20px;
-} */
 </style>
diff --git a/frontend/src/components/createOrderStep/AppartmentInfo.vue b/frontend/src/components/createOrderStep/AppartmentInfo.vue
index b93949b..c43b88f 100644
--- a/frontend/src/components/createOrderStep/AppartmentInfo.vue
+++ b/frontend/src/components/createOrderStep/AppartmentInfo.vue
@@ -1,7 +1,38 @@
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import InputNumber from '../../ui/uikit/inputs/InputNumber.vue'
-import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
 import InputTextArea from '../../ui/uikit/inputs/InputTextArea.vue'
+
+const emit = defineEmits(['update-form-validity', 'update-price', 'update-appartment-data'])
+const appartmentData = ref({
+  rooms: 0,
+  bathrooms: 0,
+  area: 0,
+  pollution: 0,
+  comment: "",
+})
+
+const isFormValid = computed(() => {
+  const { rooms, bathrooms, area, pollution } = appartmentData.value;
+  return rooms !== 0 && bathrooms !== 0 && area !== 0 && pollution !== 0;
+})
+
+const price = computed(() => {
+  const { rooms, bathrooms, area, pollution } = appartmentData.value;
+  return rooms * 100 + bathrooms * 100 + area * 150 + pollution * 200;
+})
+
+watch(appartmentData, (newVal) => {
+  emit('update-appartment-data', newVal);
+}, { deep: true })
+
+watch(isFormValid, (newVal) => {
+  emit('update-form-validity', newVal)
+})
+
+watch(price, (newVal) => {
+  emit('update-price', newVal)
+}, {deep: true})
 </script>
 
 <template>
@@ -13,12 +44,14 @@ import InputTextArea from '../../ui/uikit/inputs/InputTextArea.vue'
     >
       <div class="input-row">
         <InputNumber
+          v-model="appartmentData.rooms"
           label="Количество комнат"
           :min="1"
           :max="10"
           :step="1"
         ></InputNumber>
         <InputNumber
+          v-model="appartmentData.bathrooms"
           label="Количество санузлов"
           :min="1"
           :max="10"
@@ -26,20 +59,23 @@ import InputTextArea from '../../ui/uikit/inputs/InputTextArea.vue'
         ></InputNumber>
       </div>
       <div class="input-row">
-        <InputTextField
-          class="input-field-row"
-          placeholder="Введите площадь квартиры в м²"
-          type="text"
-          label="Площадь квартиры"
-        ></InputTextField>
         <InputNumber
-          label="Количество санузлов"
+          v-model="appartmentData.area"
+          label="Площадь квартиры в м²"
+          :min="5"
+          :max="120"
+          :step="1"
+        ></InputNumber>
+        <InputNumber
+          v-model="appartmentData.pollution"
+          label="Загрезненность"
           :min="1"
           :max="10"
           :step="1"
         ></InputNumber>
       </div>
       <InputTextArea
+        v-model="appartmentData.comment"
         label="Комментарий к заказу"
         placeholder="Введите комментарий"
         :rows="3"
diff --git a/frontend/src/components/createOrderStep/ContactInfo.vue b/frontend/src/components/createOrderStep/ContactInfo.vue
index 35ef816..ba97708 100644
--- a/frontend/src/components/createOrderStep/ContactInfo.vue
+++ b/frontend/src/components/createOrderStep/ContactInfo.vue
@@ -1,6 +1,33 @@
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import ActionButton from '../../ui/uikit/ActionButton.vue'
 import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
+import { VTimePicker} from 'vuetify/labs/VTimePicker'
+import { VDateInput } from 'vuetify/labs/components'
+
+const emit = defineEmits(['update-form-validity', 'update-address-data'])
+const menu = ref<boolean>(false)
+const contactData = ref({
+  city: "",
+  street: "",
+  building: "",
+  entrance: "",
+  floor: "",
+  doorNumber: "",
+  date: new Date(""),
+  time: null
+})
+const isFormValid = computed(() => {
+  return Object.values(contactData.value).every(value => value !== "" && value !== null);
+})
+
+watch(isFormValid, (newVal) => {
+  emit('update-form-validity', newVal);
+})
+
+watch(contactData, (newVal) => {
+  emit('update-address-data', newVal);
+}, { deep: true })
 </script>
 
 <template>
@@ -12,26 +39,23 @@ import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
     >
       <div class="input-row">
         <InputTextField
-          placeholder="Введите имя"
-          type="text"
-          label="Имя"
-        ></InputTextField>
-        <InputTextField
-          placeholder="Введите фамилию"
+          v-model="contactData.city"
+          placeholder="Введите город"
           type="text"
-          label="Фамилия"
+          label="Город"
         ></InputTextField>
-      </div>
         <InputTextField
-          placeholder="Введите номер телефона"
+          v-model="contactData.street"
+          placeholder="Введите улицу"
           type="text"
-          label="Номер телефона"
+          label="Улица"
         ></InputTextField>
-      <div class="input-row">
         <InputTextField
-          placeholder="Введите адрес"
+          v-model="contactData.building"
+          placeholder="Введите номер дома"
           type="text"
-          label="Адрес"
+          label="Дом"
+          hint="Пример: 4к1 или 8AE"
         ></InputTextField>
         <ActionButton
           id="my-address-btn"
@@ -43,37 +67,61 @@ import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
       </div>
       <div class="input-row">
         <InputTextField
+          v-model="contactData.entrance"
           placeholder="Введите квартиру"
           type="text"
           label="Квартира"
         ></InputTextField>
         <InputTextField
+          v-model="contactData.floor"
           placeholder="Введите подъезд"
           type="text"
           label="Подъезд"
         ></InputTextField>
         <InputTextField
+          v-model="contactData.doorNumber"
           placeholder="Введите этаж"
           type="text"
           label="Этаж"
         ></InputTextField>
-        <InputTextField
-          placeholder="Введите домофон"
-          type="text"
-          label="Домофон"
-        ></InputTextField>
       </div>
       <div class="input-row">
-        <InputTextField
-          placeholder="Введите дату"
-          type="date"
+        <v-date-input
+          v-model="contactData.date"
+          class="input-date"
           label="Дата"
-        ></InputTextField>
+          variant="solo"
+          rounded="xl"
+          prepend-icon=""
+        ></v-date-input>
         <InputTextField
+          v-model="contactData.time"
           placeholder="Введите время"
           type="string"
           label="Время"
-        ></InputTextField>
+          :active="menu"
+          :focus="menu"
+          readonly
+        >
+          <template #body>
+            <v-menu
+              v-model="menu"
+              :close-on-content-click="false"
+              activator="parent"
+              transition="scale-transition"
+            >
+              <v-time-picker
+                v-if="menu"
+                v-model="contactData.time"
+                width="auto"
+                format="24hr"
+                max="18:00"
+                min="6:00"
+                scrollable
+              ></v-time-picker>
+            </v-menu>
+          </template>
+        </InputTextField>
       </div>
     </v-form>
   </div>
@@ -105,6 +153,9 @@ import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
   align-items: flex-start;
   gap: 10px;
 }
+.input-date{
+  font-weight: bold;
+}
 #my-address-btn {
   height: 72%;
 }
diff --git a/frontend/src/components/createOrderStep/ServiceInfo.vue b/frontend/src/components/createOrderStep/ServiceInfo.vue
index a703e7a..6ea082c 100644
--- a/frontend/src/components/createOrderStep/ServiceInfo.vue
+++ b/frontend/src/components/createOrderStep/ServiceInfo.vue
@@ -1,13 +1,41 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import HeaderList from '../../ui/uikit/containers/HeaderList.vue'
 import ServiceItem from '../../ui/uikit/items/ServiceItem.vue'
+import Service from '../../api/models/service'
+import { getAllServices } from '../../api/request'
 
-const services = ref([
-  {id: 1, name: "Уборка", price: "10$"},
-  {id: 2, name: "Уборка", price: "10$"},
-  {id: 3, name: "Уборка", price: "10$"}
-]) // TODO DB request
+const emit = defineEmits(['update-form-validity', 'update-price', 'update-selected-services'])
+const props = defineProps<{ currentPrice: number }>()
+const services = ref<Service[]>([])
+const selectedServices = ref<Service[]>([])
+const price = ref<number>(props.currentPrice)
+
+onMounted(() => {
+  emit('update-form-validity', true)
+  getAllServices()
+  .then((response) => {
+    services.value = response
+  })
+})
+
+watch(price, (newVal) => {
+  emit('update-price', newVal);
+})
+
+watch(selectedServices, (newVal) => {
+  emit('update-selected-services', newVal);
+}, { deep: true });
+
+function addServicePrice(service: Service): void {
+  selectedServices.value.push(service)
+  price.value += service.price
+}
+
+function removeServicePrice(service: Service): void {
+  selectedServices.value = selectedServices.value.filter(s => s.id !== service.id)
+  price.value -= service.price
+}
 </script>
 
 <template>
@@ -20,13 +48,15 @@ const services = ref([
     <template #items="{ item }">
       <ServiceItem
         :isAdmin="false"
-        :service="item">
-      </ServiceItem>
+        :service="item"
+        @add-service-price="addServicePrice"
+        @remove-service-price="removeServicePrice"
+      ></ServiceItem>
     </template>
     <template #bottom>
       <div class="service-info-price-container">
         <div class="service-info-price">
-          <p>Итого: 0$</p>
+          <p>Итого: {{ price }}₽</p>
         </div>
       </div>
     </template>
diff --git a/frontend/src/routing/router.ts b/frontend/src/routing/router.ts
index ecd1e2f..36f447c 100644
--- a/frontend/src/routing/router.ts
+++ b/frontend/src/routing/router.ts
@@ -12,6 +12,7 @@ import AdminServicesSettingsPage from '../components/admin/AdminServicesSettings
 import AdminStatisticSettingsPage from '../components/admin/AdminStatisticSettingsPage.vue'
 import WorkerMainPage from '../components/worker/WorkerMainPage.vue'
 import WorkerOrdersPage from '../components/worker/WorkerOrdersPage.vue'
+import OrderDetail from '../ui/uikit/items/OrderDetail.vue'
 
 const routes = [
   {
@@ -37,7 +38,14 @@ const routes = [
           {
             name: 'client-orders-history',
             path: 'history-order',
-            component: ClientOrdersHistoryPage
+            component: ClientOrdersHistoryPage,
+            children: [
+              {
+                name: 'order-details',
+                path: ':order_id([a-fA-F0-9]+)',
+                component: OrderDetail
+              }
+            ]
           },
           {
             name: 'client-create-order',
diff --git a/frontend/src/ui/uikit/inputs/InputTextField.vue b/frontend/src/ui/uikit/inputs/InputTextField.vue
index 8475bbe..c73feca 100644
--- a/frontend/src/ui/uikit/inputs/InputTextField.vue
+++ b/frontend/src/ui/uikit/inputs/InputTextField.vue
@@ -20,7 +20,11 @@ const props = withDefaults(defineProps<TextField>(), {
     :type="props.type"
     :label="props.label"
     clearable
-  ></v-text-field>
+  >
+    <slot
+      name="body"
+    ></slot>
+  </v-text-field>
 </template>
 
 <style scoped>
diff --git a/frontend/src/ui/uikit/items/AddressItem.vue b/frontend/src/ui/uikit/items/AddressItem.vue
index 118f6e7..04b4dc7 100644
--- a/frontend/src/ui/uikit/items/AddressItem.vue
+++ b/frontend/src/ui/uikit/items/AddressItem.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { defineProps } from 'vue'
+import Address from '../../../api/models/address'
 
 const props = defineProps<{
-  address: string;
-  // id: string; раскомментировать после добавления авторизации
+  address: Address;
 }>()
 </script>
 
 <template>
   <div class="address-item">
-    <p>{{ props.address }}</p>
+    <p>
+      {{ props.address.city }}, {{ props.address.street }}, 
+      дом {{ props.address.building }}, подъезд {{ props.address.entrance }},
+      этаж {{ props.address.floor }}, квартира {{ props.address.door_number }}
+    </p>
   </div>
 </template>
 
@@ -26,7 +30,7 @@ const props = defineProps<{
   text-align: left;
 }
 p {
-  font-size: 32px;
+  font-size: 28px;
   font-weight: bold;
 }
 </style>
diff --git a/frontend/src/ui/uikit/items/OrderDetail.vue b/frontend/src/ui/uikit/items/OrderDetail.vue
new file mode 100644
index 0000000..ac48f47
--- /dev/null
+++ b/frontend/src/ui/uikit/items/OrderDetail.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import Order from '../../../api/models/order'
+import { getOrderById } from '../../../api/request';
+
+const route = useRoute();
+const orderId = route.params.id as string;
+const order = ref<Order>();
+
+onMounted(() => {
+  getOrderById(orderId)
+    .then((response) => {
+      order.value = response
+      console.log(order.value)
+    })
+})
+
+function formatDate(dateTime: string): string {
+  const date = new Date(dateTime);
+  const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
+  const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
+  return `${date.getDate()}.${month}.${date.getFullYear()} ${date.getHours()}:${minutes}`;
+}
+
+</script>
+
+<template>
+  <div class="order-detail">
+    <h1>Детали заказа</h1>
+    <p>Заказ по адресу: {{ order!.address.city }}, {{ order!.address.street }}, дом {{ order!.address.building }}, подъезд {{ order!.address.entrance }}, этаж {{ order!.address.floor }}, квартира {{ order!.address.door_number }}</p>
+    <p>На дату: {{ formatDate(order!.date_time.toISOString()) }}</p>
+    <p>Цена: {{ order!.price }}₽</p>
+    <p>Количество работников: {{ order!.required_workers }}</p>
+    <p>Услуги:</p>
+  </div>
+</template>
+
+<style scoped>
+.order-detail {
+  border: 3px solid #3846c0;
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  padding: 10px;
+  text-align: left;
+}
+</style>
diff --git a/frontend/src/ui/uikit/items/OrderItem.vue b/frontend/src/ui/uikit/items/OrderItem.vue
index 3f84a4b..9d92c00 100644
--- a/frontend/src/ui/uikit/items/OrderItem.vue
+++ b/frontend/src/ui/uikit/items/OrderItem.vue
@@ -1,22 +1,46 @@
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps } from 'vue'
+import Order from '../../../api/models/order'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const props = defineProps<{
-  order: {
-    date: string;
-    time: string;
-    address: string;
-    price: number;
-  };
-}>();
+  order: Order;
+}>()
+
+function formatDate(): string {
+  const date = new Date(props.order.date_time)
+  const mounth = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
+  const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+  return `${date.getDate()}.${mounth}.${date.getFullYear()} ${date.getHours()}:${minutes}`
+}
+
+function goToOrderDetails() {
+  console.log('goToOrderDetails')
+  router.push({ name: 'order-details', params: { order_id: props.order.id } });
+}
 </script>
 
 <template>
-  <div class="order-item">
-    <p>Заказ {{ props.order.date }} в {{ props.order.time }}</p>
-    <p>{{ props.order.address }}</p>
-    <p>{{ props.order.price }}$</p>
-  </div>
+  <div 
+    class="order-item"
+    @click="goToOrderDetails"
+  >
+    <p>
+        Заказ по адресу: {{ props.order.address.city }}, 
+        {{ props.order.address.street }}, 
+        дом {{ props.order.address.building }},
+        подъезд {{ props.order.address.entrance }},
+        этаж {{ props.order.address.floor }},
+        квартира {{ props.order.address.door_number }}
+      </p>
+      <p>
+        На дату: {{ formatDate() }}</p>
+      <p>
+        Цена: {{ props.order.price }}₽
+      </p>
+    </div>
 </template>
 
 <style scoped>
@@ -26,5 +50,14 @@ const props = defineProps<{
   border-radius: 15px;
   padding: 10px;
   text-align: left;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+.order-item:hover {
+  background-color: #f0f0f0;
+}
+p {
+  font-size: 22px;
+  font-weight: bold;
 }
 </style>
diff --git a/frontend/src/ui/uikit/items/ServiceItem.vue b/frontend/src/ui/uikit/items/ServiceItem.vue
index 328b4f3..9495b6b 100644
--- a/frontend/src/ui/uikit/items/ServiceItem.vue
+++ b/frontend/src/ui/uikit/items/ServiceItem.vue
@@ -2,6 +2,7 @@
 import { Ref, ref, defineProps } from 'vue'
 import ActionButton from '../ActionButton.vue'
 import InputTextField from '../inputs/InputTextField.vue'
+import Consumable from '../../../api/models/consumable'
 import Dialog from '../Dialog.vue'
 
 const props = defineProps<{
@@ -9,11 +10,17 @@ const props = defineProps<{
   service: {
     id: string;
     name: string;
-    price: string;
+    price: number;
+    workers_quantity: number;
+    description: string;
+    consumables: Consumable[];
   }
 }>()
 
+const emit = defineEmits(['add-service-price', 'remove-service-price'])
+
 const isDialogVisible: Ref<boolean> = ref(false)
+const isServiceAdded: Ref<boolean> = ref(false)
 
 function openDialog(): void {
   isDialogVisible.value = true
@@ -22,12 +29,21 @@ function openDialog(): void {
 function closeDialog(): void {
   isDialogVisible.value = false
 }
+
+function toggleServicePrice(): void {
+  if (isServiceAdded.value) {
+    emit('remove-service-price', props.service);
+  } else {
+    emit('add-service-price', props.service);
+  }
+  isServiceAdded.value = !isServiceAdded.value;
+}
 </script>
 
 <template>
   <div class="service-item">
     <p>{{ props.service.name }}</p>
-    <p>{{ props.service.price }}</p>
+    <p>{{ props.service.price }}₽</p>
     <div class="service-edit">
       <ActionButton
         v-if="props.isAdmin"
@@ -39,10 +55,11 @@ function closeDialog(): void {
       ></ActionButton>
       <ActionButton
         v-else
-        text="Добавить"
-        type="add"
-        color="#394cc2"
+        :text="isServiceAdded ? 'Убрать' : 'Добавить'"
+        type="add-remove"
+        :color="isServiceAdded ? '#f65858' : '#394cc2'"
         variant="flat"
+        @click="toggleServicePrice"
       ></ActionButton>
     </div>
     <!-- Dialog to edit service -->