diff --git a/index.html b/index.html
index a0c71fa..4cbe477 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="/src/style.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet" />
     <title>e-book</title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 9e9b6a4..bc20f0b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,9 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <div class="bg-red-700">
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <UiLayout>
+    <RouterView />
+  </UiLayout>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<script setup lang="ts">
+import UiLayout from './layout/UiLayout.vue'
+</script>
diff --git a/src/assets/img/png/bg.png b/src/assets/img/png/bg.png
new file mode 100644
index 0000000..bcacdf3
Binary files /dev/null and b/src/assets/img/png/bg.png differ
diff --git a/src/assets/img/webp/footer-flowers.webp b/src/assets/img/webp/footer-flowers.webp
new file mode 100644
index 0000000..ba69a36
Binary files /dev/null and b/src/assets/img/webp/footer-flowers.webp differ
diff --git a/src/components/Typography/UiParagraph.vue b/src/components/Typography/UiParagraph.vue
index 105854e..5efcb84 100644
--- a/src/components/Typography/UiParagraph.vue
+++ b/src/components/Typography/UiParagraph.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="as"
-    class="text-gray-900"
+    class="text-primary"
     :class="[
       {
         'text-2xl lg:text-3xl 2xl:text-4xl': size === '600',
@@ -13,7 +13,7 @@
         'text-lg lg:text-xl 2xl:text-2xl': size === '400',
       }, // 18px
       {
-        'text-base lg:text-lg': size === '300',
+        'text-lg lg:text-[20px]': size === '300',
       }, // 16px
       {
         'text-sm': size === '200',
diff --git a/src/components/UiNav/UiNav.vue b/src/components/UiNav/UiNav.vue
new file mode 100644
index 0000000..6cd234e
--- /dev/null
+++ b/src/components/UiNav/UiNav.vue
@@ -0,0 +1,25 @@
+<template>
+  <UiParagraph
+    class="cursor-pointer"
+    tag="span"
+    size="300"
+    v-for="({ path, name, target }, index) in navContent"
+    :key="index"
+  >
+    <component :is="target ? 'a' : 'RouterLink'" :to="path" :href="path" :target="target">{{
+      name
+    }}</component>
+  </UiParagraph>
+</template>
+<script setup lang="ts">
+import UiParagraph from '../Typography/UiParagraph.vue'
+
+interface NavContent {
+  name: string
+  path: string
+  target?: string
+}
+const { navContent = undefined } = defineProps<{
+  navContent: NavContent[] | undefined
+}>()
+</script>
diff --git a/src/layout/UiFooter/UiFooter.vue b/src/layout/UiFooter/UiFooter.vue
index 61984a0..9b2670c 100644
--- a/src/layout/UiFooter/UiFooter.vue
+++ b/src/layout/UiFooter/UiFooter.vue
@@ -1,5 +1,33 @@
 <template>
-  <footer>tesst</footer>
+  <footer class="mx-auto container">
+    <div class="relative z-10">
+      <div class="flex space-x-[51px] mb-5">
+        <UiNav :nav-content="footerNavigation" />
+      </div>
+      <div class="xl:max-w-[1225px] pb-7 flex justify-between">
+        <div>
+          <UiParagraph tag="span" size="300"
+            >По всем вопросам:<br />
+            <a href="mailto:vinogalante@yandex.ru" target="_blank">
+              vinogalante@yandex.ru
+            </a></UiParagraph
+          >
+        </div>
+        <div>
+          <UiParagraph tag="span" size="300" class="[&]:text-secondary"
+            ><a href="https://www.litres.ru/" target="_blank">
+              Реферальная ссылка на ЛитРес
+            </a></UiParagraph
+          >
+        </div>
+      </div>
+    </div>
+    <!-- <img class="absolute top-6" src="/src/assets/img/webp/footer-flowers.webp" /> -->
+  </footer>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiNav from '@/components/UiNav/UiNav.vue'
+import { footerNavigation } from '@/layout/UiFooter/_data'
+</script>
diff --git a/src/layout/_data/footer-navigation.data.ts b/src/layout/UiFooter/_data/footer-navigation.data.ts
similarity index 100%
rename from src/layout/_data/footer-navigation.data.ts
rename to src/layout/UiFooter/_data/footer-navigation.data.ts
diff --git a/src/layout/UiFooter/_data/index.ts b/src/layout/UiFooter/_data/index.ts
new file mode 100644
index 0000000..d615bec
--- /dev/null
+++ b/src/layout/UiFooter/_data/index.ts
@@ -0,0 +1 @@
+export { default as footerNavigation } from '@/layout/UiFooter/_data/footer-navigation.data'
diff --git a/src/layout/UiHeader/UiHeader.vue b/src/layout/UiHeader/UiHeader.vue
index 1fcc5d5..57221f7 100644
--- a/src/layout/UiHeader/UiHeader.vue
+++ b/src/layout/UiHeader/UiHeader.vue
@@ -1,11 +1,22 @@
 <template>
-  <header class="[&]:bg-accent text-white py-4 px-2 border-b border-b-white">
+  <header class="[&]:bg-accent text-white py-4 container mx-auto">
     <div class="flex flex-row-reverse justify-end gap-4 items-center">
       <slot name="content" />
-      <div class="flex"></div>
+      <div class="flex items-center gap-32">
+        <div class="russo-one-regular">
+          <UiParagraph tag="span" class="[&]:text-5xl">Vino Galante</UiParagraph>
+        </div>
+        <div class="flex space-x-10">
+          <UiNav :nav-content="headerNavigation" />
+        </div>
+      </div>
     </div>
     <slot name="right-icons" />
   </header>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import UiNav from '@/components/UiNav/UiNav.vue'
+import { headerNavigation } from './_data'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+</script>
diff --git a/src/layout/UiHeader/_data/header-navigation.data.ts b/src/layout/UiHeader/_data/header-navigation.data.ts
new file mode 100644
index 0000000..02dad34
--- /dev/null
+++ b/src/layout/UiHeader/_data/header-navigation.data.ts
@@ -0,0 +1,24 @@
+const headerNavigation = [
+  {
+    name: 'Главная',
+    path: '/',
+  },
+  {
+    name: 'Книга I',
+    path: '/books/1',
+  },
+  {
+    name: 'Книга II',
+    path: '/books/2',
+  },
+  {
+    name: 'Купить',
+    path: '/buy',
+  },
+  {
+    name: 'Отзывы',
+    path: '/feedback',
+  },
+]
+
+export default headerNavigation
diff --git a/src/layout/UiHeader/_data/index.ts b/src/layout/UiHeader/_data/index.ts
new file mode 100644
index 0000000..7039a98
--- /dev/null
+++ b/src/layout/UiHeader/_data/index.ts
@@ -0,0 +1 @@
+export { default as headerNavigation } from '@/layout/UiHeader/_data/header-navigation.data'
diff --git a/src/layout/UiLayout.vue b/src/layout/UiLayout.vue
index 3a91ca7..8e6c05e 100644
--- a/src/layout/UiLayout.vue
+++ b/src/layout/UiLayout.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen">
+  <div
+    class="min-h-svh bg-black-50 lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-0"
+  >
     <UiHeader />
     <UiMain />
     <UiFooter />
diff --git a/src/main.ts b/src/main.ts
index 2425c0f..813ba22 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,12 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import './style.css'
 import App from './App.vue'
+import router from '@/config/router/index'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
diff --git a/src/style.css b/src/style.css
index 4bd5189..ea4d3e7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,14 +1,16 @@
 @import 'tailwindcss';
 
 @theme {
-  --color-primary: #ffffff;
-  --color-secondary: #f54b7e;
+  --color-primary: rgba(255, 255, 255, 1);
+  --color-secondary: rgba(229, 30, 125, 1);
   --color-three: #e20c66;
 
   --color-accent-50: #f54378;
   --color-accent-100: #e51e7d;
   --color-accent-150: #c4035f;
 
+  --color-black-50: #0c1018;
+
   /*system colors*/
   --color-error: oklch(57.7% 0.245 27.325);
   --color-warning: oklch(76.9% 0.188 70.08);
@@ -17,3 +19,69 @@
   --color-text-disabled: oklch(55.1% 0.027 264.364);
   --color-bg-disabled: oklch(92.8% 0.006 264.531);
 }
+
+.lato-thin {
+  font-family: 'Lato', sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.lato-light {
+  font-family: 'Lato', sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.lato-regular {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.lato-bold {
+  font-family: 'Lato', sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.lato-black {
+  font-family: 'Lato', sans-serif;
+  font-weight: 900;
+  font-style: normal;
+}
+
+.lato-thin-italic {
+  font-family: 'Lato', sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+
+.lato-light-italic {
+  font-family: 'Lato', sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.lato-regular-italic {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.lato-bold-italic {
+  font-family: 'Lato', sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.lato-black-italic {
+  font-family: 'Lato', sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+.russo-one-regular {
+  font-family: 'Russo One', sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
