diff --git a/package.json b/package.json
index 7dce32a..77c44fa 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@formkit/auto-animate": "^0.8.2",
     "axios": "^1.7.9",
     "vue": "^3.5.13",
+    "vue-router": "4",
     "vue3-toastify": "^0.2.8"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index fe35ca7..1b15adf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,8 @@
 <script setup>
   import { computed, onMounted, provide, reactive, ref, watch } from 'vue'
   import Header from '@/components/Header.vue'
-  import CardList from '@/components/CardList.vue'
   import Drawer from '@/components/Drawer.vue'
   import axios from 'axios'
-  import Spinner from '@/components/Spinner.vue'
   import { toast } from 'vue3-toastify'
   import 'vue3-toastify/dist/index.css';
   const showDrawer = ref(false);
@@ -150,39 +148,17 @@
     <Header />
 
     <div class="p-10">
-      <div class="flex justify-between items-center mb-8">
-        <h2 class="text-3xl font-bold">Все кроссовки</h2>
-
-        <div class="flex gap-4 flex-wrap">
-          <select class="py-2 px-3 border rounded-md outline-none" v-model="filters.sortBy">
-            <option value="" disabled>Сортировка по:</option>
-            <option value="title">По названию</option>
-            <option value="price">По цене (сначала дешевые)</option>
-            <option value="-price">По цене (сначала дорогие)</option>
-          </select>
-
-          <div class="relative">
-            <img class="absolute top-3 left-4" src="/search.svg" alt="Search">
-            <input v-model="filters.searchQuery" class="border rounded-md py-2 pl-11 pr-4 outline-none focus:border-gray-400" type="text" placeholder="Поиск">
-          </div>
-        </div>
-      </div>
-
-
-      <div v-if="isLoading" class="flex justify-center align-center">
-        <Spinner/>
-      </div>
-
-      <div v-else>
-        <CardList
-          v-if="items.length > 0"
+      <router-view v-slot="{ Component }">
+        <component
+          :is="Component"
           :items="items"
-          @toggle-to-favorite="toggleToFavorite"
-          @toggle-to-cart="toggleToCart"
-        />
-        <h2 v-else>Пусто</h2>
-      </div>
-
+          :isLoading="isLoading"
+          :filters="filters"
+          :toggleToFavorite="toggleToFavorite"
+          :toggleToCart="toggleToCart"
+        >
+        </component>
+      </router-view>
     </div>
   </div>
 </template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index ba6f56e..305a9e5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -9,14 +9,15 @@
 
 <template>
   <header class="flex justify-between border-b border-slate-100 px-11 py-10">
-    <div class="flex items-center gap-4">
-      <img src="/logo.png" alt="Logo" class="w-10" />
-
-      <div>
-        <h2 class="text-xl font-bold uppercase">Vue Sneakers</h2>
-        <p class="text-slate-500">Магазин лучших кроссовок</p>
-      </div>
-    </div>
+      <router-link to="/">
+        <div class="flex items-center gap-4">
+          <img src="/logo.png" alt="Logo" class="w-10" />
+          <div>
+            <h2 class="text-xl font-bold uppercase">Vue Sneakers</h2>
+            <p class="text-slate-500">Магазин лучших кроссовок</p>
+          </div>
+        </div>
+      </router-link>
 
     <ul class="flex items-center gap-8">
       <li
@@ -27,11 +28,13 @@
         <b> {{ decimalFormatter.format(totalPrice)}}  </b>
       </li>
 
-      <li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
-        <img src="/heart.svg" alt="Heart" />
+      <router-link to="/favorites">
+        <li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
+          <img src="/heart.svg" alt="Heart" />
 
-        <span>Закладки</span>
-      </li>
+          <span>Закладки</span>
+        </li>
+      </router-link>
 
       <li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
         <img src="/profile.svg" alt="Profile" />
diff --git a/src/main.js b/src/main.js
index a550d08..f2de25d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,8 +3,22 @@ import './assets/main.css'
 import App from './App.vue'
 import Vue3Toastify from 'vue3-toastify';
 import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '@/pages/Home.vue'
+import Favorites from '@/pages/Favorites.vue'
+
+const routes = [
+  { path: '/', name: 'Home', component: Home },
+  { path: '/favorites', name: 'favorites', component: Favorites },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
 
 const app = createApp(App);
+app.use(router);
 app.use(Vue3Toastify, { autoClose: 1000 });
 app.use(autoAnimatePlugin);
 app.mount('#app')
diff --git a/src/pages/Favorites.vue b/src/pages/Favorites.vue
new file mode 100644
index 0000000..1bf060a
--- /dev/null
+++ b/src/pages/Favorites.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue'
+  import Spinner from '@/components/Spinner.vue'
+  import CardList from '@/components/CardList.vue'
+
+  const props = defineProps({
+    filters: Object,
+    isLoading: Boolean,
+    items: Array,
+    toggleToFavorite: Function,
+    toggleToCart: Function,
+  })
+
+  const favorites = computed(() => props.items.filter(item => item.isFavorite))
+</script>
+
+
+<template>
+  <div v-if="isLoading" class="flex justify-center align-center">
+    <Spinner/>
+  </div>
+  <div v-else>
+    <CardList
+      v-if="favorites.length > 0"
+      :items="favorites"
+      @toggle-to-favorite="toggleToFavorite"
+      @toggle-to-cart="toggleToCart"
+    />
+    <h2 v-else>Пусто</h2>
+  </div>
+</template>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
new file mode 100644
index 0000000..a770034
--- /dev/null
+++ b/src/pages/Home.vue
@@ -0,0 +1,49 @@
+<script setup>
+  import CardList from '@/components/CardList.vue'
+  import Spinner from '@/components/Spinner.vue'
+
+  defineProps({
+    filters: Object,
+    isLoading: Boolean,
+    items: Array,
+    toggleToFavorite: Function,
+    toggleToCart: Function,
+  })
+
+</script>
+
+
+<template>
+  <div class="flex justify-between items-center mb-8">
+    <h2 class="text-3xl font-bold">Все кроссовки</h2>
+
+    <div class="flex gap-4 flex-wrap">
+      <select class="py-2 px-3 border rounded-md outline-none" v-model="filters.sortBy">
+        <option value="" disabled>Сортировка по:</option>
+        <option value="title">По названию</option>
+        <option value="price">По цене (сначала дешевые)</option>
+        <option value="-price">По цене (сначала дорогие)</option>
+      </select>
+
+      <div class="relative">
+        <img class="absolute top-3 left-4" src="/search.svg" alt="Search">
+        <input v-model="filters.searchQuery" class="border rounded-md py-2 pl-11 pr-4 outline-none focus:border-gray-400" type="text" placeholder="Поиск">
+      </div>
+    </div>
+  </div>
+
+
+  <div v-if="isLoading" class="flex justify-center align-center">
+    <Spinner/>
+  </div>
+
+  <div v-else>
+    <CardList
+      v-if="items.length > 0"
+      :items="items"
+      @toggle-to-favorite="toggleToFavorite"
+      @toggle-to-cart="toggleToCart"
+    />
+    <h2 v-else>Пусто</h2>
+  </div>
+</template>
diff --git a/yarn.lock b/yarn.lock
index 75cd734..98ff9ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1085,6 +1085,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/devtools-api@npm:^6.6.4":
+  version: 6.6.4
+  resolution: "@vue/devtools-api@npm:6.6.4"
+  checksum: 10c0/0a993ae23618166e1bee5a7c14cebd8312752b93c143cbdd48fb2d0f7ade070d0e6baf757cd920d4681fef8f9acf29515162160f38cc7410f9a684d2df21b6de
+  languageName: node
+  linkType: hard
+
 "@vue/devtools-core@npm:^7.7.0":
   version: 7.7.0
   resolution: "@vue/devtools-core@npm:7.7.0"
@@ -1298,6 +1305,7 @@ __metadata:
     vite: "npm:^6.0.5"
     vite-plugin-vue-devtools: "npm:^7.6.8"
     vue: "npm:^3.5.13"
+    vue-router: "npm:4"
     vue3-toastify: "npm:^0.2.8"
   languageName: unknown
   linkType: soft
@@ -4119,6 +4127,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-router@npm:4":
+  version: 4.5.0
+  resolution: "vue-router@npm:4.5.0"
+  dependencies:
+    "@vue/devtools-api": "npm:^6.6.4"
+  peerDependencies:
+    vue: ^3.2.0
+  checksum: 10c0/5521c8d0ab7634ea75118824d4b4cae3748964725b3d3b4064eb3dbd44013381ea3163d4d856af61655936cd897b84f8eeebb312d0668532c3074d53814bd953
+  languageName: node
+  linkType: hard
+
 "vue3-toastify@npm:^0.2.8":
   version: 0.2.8
   resolution: "vue3-toastify@npm:0.2.8"