diff --git a/lib/components/history_item_card.dart b/lib/components/history_item_card.dart
index 6d3b739..766d72d 100644
--- a/lib/components/history_item_card.dart
+++ b/lib/components/history_item_card.dart
@@ -35,8 +35,8 @@ class HistoryItemCard extends StatelessWidget {
         constraints: const BoxConstraints(
           minHeight: 100,
           maxHeight: 200,
-          minWidth: 400,
-          maxWidth: 600,
+          minWidth: 600,
+          maxWidth: 800,
         ),
         child: Card(
           elevation: 4,
diff --git a/lib/components/item_card.dart b/lib/components/item_card.dart
index 59f98ce..74287ac 100644
--- a/lib/components/item_card.dart
+++ b/lib/components/item_card.dart
@@ -14,12 +14,20 @@ class ProductCard extends StatelessWidget {
     required this.onTap,
   });
 
+  double getCardHeight({required BuildContext context}) {
+    if (MediaQuery.of(context).size.width > 600) {
+      return 200;
+    }
+    return 100;
+  }
+
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: onTap,
       child: ConstrainedBox(
-        constraints: const BoxConstraints(minHeight: 200),
+        constraints: BoxConstraints(
+            minHeight: 80, maxHeight: getCardHeight(context: context)),
         child: Card(
           elevation: 3,
           color: Theme.of(context).scaffoldBackgroundColor,
diff --git a/lib/pages/main.dart b/lib/pages/main.dart
index 6a5c66f..e5708fe 100644
--- a/lib/pages/main.dart
+++ b/lib/pages/main.dart
@@ -4,6 +4,7 @@ import 'package:gymlink_module_web/components/item_card.dart';
 import 'package:gymlink_module_web/pages/basket.dart';
 import 'package:gymlink_module_web/pages/detail.dart';
 import 'package:gymlink_module_web/pages/order_history.dart';
+import 'package:gymlink_module_web/tools/relative.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 const List<Map<String, String>> testData = [
@@ -111,9 +112,7 @@ class _MainPageState extends State<MainPage> {
                           ),
                         ),
                       ),
-                      const Spacer(
-                        flex: 2,
-                      ),
+                      getSpacer(context: context, flex: 2),
                       ElevatedButton(
                         onPressed: () {
                           Navigator.of(context).push(MaterialPageRoute(
diff --git a/lib/pages/order_history.dart b/lib/pages/order_history.dart
index b040c1b..443391b 100644
--- a/lib/pages/order_history.dart
+++ b/lib/pages/order_history.dart
@@ -2,36 +2,32 @@ import 'package:flutter/material.dart';
 import 'package:gymlink_module_web/components/app_bar.dart';
 import 'package:gymlink_module_web/components/heading.dart';
 import 'package:gymlink_module_web/components/history_item_card.dart';
+import 'package:gymlink_module_web/tools/relative.dart';
 
 List<Map<String, String>> orders = [
-  {
-    "image": "product.png",
-    "price": "120",
-    "id": "34fa3126-bfaf-5dec-8f4a-b246c097ef73",
-    "date": "11.09.2001"
-  },
+  {"image": "product.png", "price": "120", "id": "66", "date": "11.09.2001"},
   {
     "image": "product.png",
     "price": "150",
-    "id": "34a26e82-7656-5e98-a44a-c2d01d0b1ad1123",
+    "id": "56",
     "date": "11.09.2001",
   },
   {
     "image": "product.png",
     "price": "250",
-    "id": "4fb204b7-3f9e-52a2-bed1-415c00a31a37123",
+    "id": "98",
     "date": "11.09.2001",
   },
   {
     "image": "product.png",
     "price": "300",
-    "id": "09b2f5bb-683e-5c39-ae89-b8e152fa8bcf123",
+    "id": "50",
     "date": "11.09.2001",
   },
   {
     "image": "product.png",
     "price": "100",
-    "id": "cd1b6817-db94-5394-be1d-af88af79749f123",
+    "id": "30",
     "date": "11.09.2001",
   }
 ];
@@ -40,6 +36,7 @@ class HistoryPage extends StatelessWidget {
   const HistoryPage({
     super.key,
   });
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -69,7 +66,7 @@ class HistoryPage extends StatelessWidget {
                     },
                   ),
                 ),
-                const Spacer(),
+                getSpacer(context: context)
               ],
             ),
           ),
diff --git a/lib/pages/order_pay.dart b/lib/pages/order_pay.dart
new file mode 100644
index 0000000..47a6603
--- /dev/null
+++ b/lib/pages/order_pay.dart
@@ -0,0 +1,26 @@
+import 'dart:ui_web' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:universal_html/html.dart';
+
+class OrderPayPage extends StatelessWidget {
+  const OrderPayPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    registerHtmlElementView();
+    return const HtmlElementView(
+      viewType: 'payment-html',
+    );
+  }
+
+  void registerHtmlElementView() {
+    ui.platformViewRegistry.registerViewFactory(
+        'payment-html',
+        (int viewId) => IFrameElement()
+          ..src = 'payment.html'
+          ..style.width = '100%'
+          ..style.height = '500px'
+          ..style.border = 'none');
+  }
+}
diff --git a/lib/states/mobile.dart b/lib/states/mobile.dart
index 06802bd..6babbe2 100644
--- a/lib/states/mobile.dart
+++ b/lib/states/mobile.dart
@@ -4,9 +4,9 @@ import 'package:gymlink_module_web/pages/main.dart';
 import 'package:gymlink_module_web/theme.dart';
 
 class MyAppStateMobile extends State<MyApp> {
-  bool _isLoading = true;
+  bool _isLoading = false;
   ThemeData theme = myTheme;
-  bool black_theme = true;
+  bool black_theme = false;
 
   @override
   Widget build(BuildContext context) {
diff --git a/lib/theme.dart b/lib/theme.dart
index bc5f7f8..2732184 100644
--- a/lib/theme.dart
+++ b/lib/theme.dart
@@ -13,6 +13,7 @@ ThemeData getThemeData(Color color, bool dark) {
     ).copyWith(
       onPrimary: dark ? materialColor[600] : Colors.white,
     ),
+    useMaterial3: true,
   );
 }
 
diff --git a/lib/tools/relative.dart b/lib/tools/relative.dart
new file mode 100644
index 0000000..54bf00c
--- /dev/null
+++ b/lib/tools/relative.dart
@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+
+Widget getSpacer(
+    {required BuildContext context, int flex = 1, double width = 10}) {
+  if (MediaQuery.of(context).size.width > 600) {
+    return Spacer(
+      flex: flex,
+    );
+  }
+  return SizedBox(width: width);
+}
diff --git a/pubspec.lock b/pubspec.lock
index 99e0803..d8e1bbf 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -1,6 +1,14 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  args:
+    dependency: transitive
+    description:
+      name: args
+      sha256: "7cf60b9f0cc88203c5a190b4cd62a99feea42759a7fa695010eb5de1c0b2252a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.0"
   async:
     dependency: transitive
     description:
@@ -25,6 +33,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
+  charcode:
+    dependency: transitive
+    description:
+      name: charcode
+      sha256: fb98c0f6d12c920a02ee2d998da788bca066ca5f148492b7085ee23372b12306
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
@@ -41,6 +57,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.18.0"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      sha256: "706b5707578e0c1b4b7550f64078f0a0f19dec3f50a178ffae7006b0a9ca58fb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -86,6 +110,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.2"
+  flutter_markdown:
+    dependency: "direct main"
+    description:
+      name: flutter_markdown
+      sha256: "9921f9deda326f8a885e202b1e35237eadfc1345239a0f6f0f1ff287e047547f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -96,6 +128,30 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  html:
+    dependency: transitive
+    description:
+      name: html
+      sha256: "3a7812d5bcd2894edf53dfaf8cd640876cf6cef50a8f238745c8b8120ea74d3a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.4"
+  http:
+    dependency: "direct main"
+    description:
+      name: http
+      sha256: "761a297c042deedc1ffbb156d6e2af13886bb305c2a343a4d972504cd67dd938"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      sha256: "2aa08ce0341cc9b354a498388e30986515406668dbcc4f7c950c3e715496693b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.2"
   leak_tracker:
     dependency: transitive
     description:
@@ -128,6 +184,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
+  markdown:
+    dependency: transitive
+    description:
+      name: markdown
+      sha256: ef2a1298144e3f985cc736b22e0ccdaf188b5b3970648f2d9dc13efd1d9df051
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.2.2"
   matcher:
     dependency: transitive
     description:
@@ -309,6 +373,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.6.1"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: facc8d6582f16042dd49f2463ff1bd6e2c9ef9f3d5da3d9b087e244a7b564b3c
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.2"
+  universal_html:
+    dependency: "direct main"
+    description:
+      name: universal_html
+      sha256: "56536254004e24d9d8cfdb7dbbf09b74cf8df96729f38a2f5c238163e3d58971"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.4"
+  universal_io:
+    dependency: transitive
+    description:
+      name: universal_io
+      sha256: "1722b2dcc462b4b2f3ee7d188dad008b6eb4c40bbd03a3de451d82c78bba9aad"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.2"
   url_launcher:
     dependency: "direct main"
     description:
diff --git a/web/payment.html b/web/payment.html
new file mode 100644
index 0000000..402b097
--- /dev/null
+++ b/web/payment.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Прием платежа с помощью виджета ЮKassa</title>
+
+  <!--Подключение библиотеки для инициализации виджета ЮKassa-->
+  <script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>
+ </head>
+ <body>
+  Ниже отобразится платежная форма. Если вы еще не создавали платеж и не передавали токен для инициализации виджета, появится сообщение об ошибке.
+
+  <!--Контейнер, в котором будет отображаться платежная форма-->
+  <div id="payment-form"></div>
+
+  Данные банковской карты для оплаты в <b>тестовом магазине</b>:
+
+   - номер — <b>5555 5555 5555 4477</b>
+   - срок действия — <b>01/30</b> (или другая дата, больше текущей)
+   - CVC — <b>123</b> (или три любые цифры)
+   - код для прохождения 3-D Secure — <b>123</b> (или три любые цифры)
+
+  <a href=https://yookassa.ru/developers/payment-acceptance/testing-and-going-live/testing#test-bank-card>Другие тестовые банковские карты</a>
+
+  <script>
+  //Инициализация виджета. Все параметры обязательные.
+  const checkout = new window.YooMoneyCheckoutWidget({
+      confirmation_token: 'ct-287e0c37-000f-5000-8000-16961d35b0fd', //Токен, который перед проведением оплаты нужно получить от ЮKassa
+      return_url: 'https://example.com/', //Ссылка на страницу завершения оплаты, это может быть любая ваша страница
+
+      //При необходимости можно изменить цвета виджета, подробные настройки см. в документации
+       //customization: {
+        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
+        //colors: {
+            //Цвет акцентных элементов: кнопка Заплатить, выбранные переключатели, опции и текстовые поля
+            //control_primary: '#00BF96', //Значение цвета в HEX
+
+            //Цвет платежной формы и ее элементов
+            //background: '#F2F3F5' //Значение цвета в HEX
+        //}
+      //},
+      error_callback: function(error) {
+          console.log(error)
+      }
+  });
+
+  //Отображение платежной формы в контейнере
+  checkout.render('payment-form');
+  </script>
+ </body>
+</html>