diff --git a/src/App.vue b/src/App.vue
index bc20f0b..89d7123 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,4 +6,5 @@
 
 <script setup lang="ts">
 import UiLayout from './layout/UiLayout.vue'
+import { RouterView } from 'vue-router'
 </script>
diff --git a/src/assets/img/webp/group-flowers.webp b/src/assets/img/webp/group-flowers.webp
new file mode 100644
index 0000000..ba818d9
Binary files /dev/null and b/src/assets/img/webp/group-flowers.webp differ
diff --git a/src/assets/img/webp/hero-banner-content.webp b/src/assets/img/webp/hero-banner-content.webp
new file mode 100644
index 0000000..46a7a6a
Binary files /dev/null and b/src/assets/img/webp/hero-banner-content.webp differ
diff --git a/src/layout/UiFooter/UiFooter.vue b/src/layout/UiFooter/UiFooter.vue
index 4945c76..484d552 100644
--- a/src/layout/UiFooter/UiFooter.vue
+++ b/src/layout/UiFooter/UiFooter.vue
@@ -13,7 +13,7 @@
             </a></UiParagraph
           >
         </div>
-        <div class="flex items-end">
+        <div v-if="route.path === '/'" class="flex items-end">
           <UiParagraph tag="span" size="300" class="[&]:text-secondary"
             ><a href="https://www.litres.ru/" target="_blank">
               Реферальная ссылка на ЛитРес
@@ -29,4 +29,7 @@
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 import UiNav from '@/components/UiNav/UiNav.vue'
 import { footerNavigation } from '@/layout/UiFooter/_data'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 </script>
diff --git a/src/layout/UiLayout.vue b/src/layout/UiLayout.vue
index 6502cfb..aa9b3a8 100644
--- a/src/layout/UiLayout.vue
+++ b/src/layout/UiLayout.vue
@@ -4,11 +4,15 @@
   >
     <div
       class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none"
-    >
-      <UiHeader />
-      <UiMain class="!min-h-[800px]" />
-      <UiFooter />
-    </div>
+    />
+    <div
+      class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none"
+    />
+    <UiHeader />
+    <UiMain class="!min-h-[800px] text-primary">
+      <slot />
+    </UiMain>
+    <UiFooter />
   </div>
 </template>
 
diff --git a/src/pages/mainPage/_ui/heroBanner.vue b/src/pages/mainPage/_ui/heroBanner.vue
new file mode 100644
index 0000000..811824b
--- /dev/null
+++ b/src/pages/mainPage/_ui/heroBanner.vue
@@ -0,0 +1,6 @@
+<template>
+  <section>
+    <img src="/src/assets/img/webp/hero-banner-content.webp" alt="Книги" />
+  </section>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/pages/mainPage/indexPage.vue b/src/pages/mainPage/indexPage.vue
index c9be536..4673555 100644
--- a/src/pages/mainPage/indexPage.vue
+++ b/src/pages/mainPage/indexPage.vue
@@ -1,3 +1,8 @@
 <template>
-  <div>main</div>
+  <section>
+    <HeroBanner />
+  </section>
 </template>
+<script setup lang="ts">
+import HeroBanner from './_ui/heroBanner.vue'
+</script>