diff --git a/package-lock.json b/package-lock.json
index 8126c48..00bfff7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-router-dom": "^7.1.3"
+        "react-dom": "^18.2.0"
       },
       "devDependencies": {
         "@trivago/prettier-plugin-sort-imports": "^5.2.1",
@@ -23,6 +22,7 @@
         "husky": "^8.0.3",
         "prettier": "^3.4.2",
         "prettier-plugin-tailwindcss": "^0.5.5",
+        "react-router-dom": "^7.1.5",
         "sass": "^1.83.4",
         "vite": "^4.4.9"
       }
@@ -1266,6 +1266,7 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
@@ -1630,16 +1631,18 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
       "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3138,9 +3141,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -3148,6 +3151,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3606,9 +3610,10 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
-      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
+      "integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/cookie": "^0.6.0",
@@ -3630,12 +3635,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
-      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.5.tgz",
+      "integrity": "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.1.3"
+        "react-router": "7.1.5"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3748,10 +3754,11 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.29.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
+      "version": "3.29.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+      "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -3860,6 +3867,7 @@
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
       "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/set-function-name": {
@@ -4045,6 +4053,7 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
       "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/type-check": {
@@ -4191,10 +4200,11 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
-      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.9.tgz",
+      "integrity": "sha512-qK9W4xjgD3gXbC0NmdNFFnVFLMWSNiR3swj957yutwzzN16xF/E7nmtAyp1rT9hviDroQANjE4HK3H4WqWdFtw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
diff --git a/package.json b/package.json
index b2b210b..25e0348 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "husky": "^8.0.3",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.5.5",
+    "react-router-dom": "^7.1.5",
     "sass": "^1.83.4",
     "vite": "^4.4.9"
   }
diff --git a/src/app.jsx b/src/app.jsx
index 5818c49..321eca5 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,13 +1,20 @@
+import { Route, Routes } from 'react-router-dom';
+
 import './app.scss';
-import HomePage from './pages/home-page';
-import ProfilePage from './pages/profile-page';
+import Favorites from './components/favorites';
+import Home from './components/home';
+import Profile from './components/profile';
+import Layout from './components/router-layout';
 
 function App() {
   return (
-    <>
-      <HomePage />
-      <ProfilePage />
-    </>
+    <Routes>
+      <Route element={<Layout />}>
+        <Route path='/' element={<Home />} />
+        <Route path='/favorites' element={<Favorites />} />
+        <Route path='/profile' element={<Profile />} />
+      </Route>
+    </Routes>
   );
 }
 
diff --git a/src/components/card.jsx b/src/components/card.jsx
index e51fc44..3dd6ea0 100644
--- a/src/components/card.jsx
+++ b/src/components/card.jsx
@@ -1,11 +1,23 @@
+import { useState } from 'react';
+
 import '../style/card.scss';
+import Modal from './modal';
 
 function Card() {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleModal = () => {
+    setIsOpen(!isOpen);
+  };
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
   return (
     <>
       <body>
+        <Modal open={isOpen} onClose={onClose} />
         <div className='flexBox'>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -13,7 +25,7 @@ function Card() {
               <h1>Thanos</h1>
             </div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -22,7 +34,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -31,7 +43,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -40,7 +52,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -49,7 +61,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -57,7 +69,7 @@ function Card() {
               <h1>Thanos</h1>
             </div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -66,7 +78,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -75,7 +87,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -84,7 +96,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -93,7 +105,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -102,7 +114,7 @@ function Card() {
             </div>
             <div></div>
           </div>
-          <div className='card'>
+          <div className='card' onClick={toggleModal}>
             <img className='thanos' src='/pictures/thanos.png' alt='' />
 
             <div>
@@ -112,10 +124,6 @@ function Card() {
             <div></div>
           </div>
         </div>
-        <nav className='arrow'>
-          <input type='image' id='image' alt='Login' src='/pictures/arrow-left.png' />
-          <input type='image' id='image' alt='Login' src='/pictures/arrow-right.png' />
-        </nav>
       </body>
     </>
   );
diff --git a/src/components/favorites.jsx b/src/components/favorites.jsx
index c03bc89..8758c95 100644
--- a/src/components/favorites.jsx
+++ b/src/components/favorites.jsx
@@ -1,94 +1,15 @@
-import { useState } from 'react';
-
-import Modal from '../components/modal';
+import '../style/card.scss';
+import '../style/favorite-responsive.scss';
 import '../style/favorites.scss';
+import Card from './card';
 
 function Favorites() {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleModal = () => {
-    setIsOpen(!isOpen);
-  };
-  const onClose = () => {
-    setIsOpen(false);
-  };
-
   return (
-    <body className='favorite'>
-      <h1>My Favorite Characters</h1>
-      <Modal open={isOpen} onClose={onClose} />
-      <div className='cards'>
-        <div className='card' onClick={toggleModal}>
-          <h2> Thanos</h2>
-          <p> Le plus grand des méchants</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Iron Man</h2>
-          <p> ddddddffff</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-      </div>
-      <div className='cards'>
-        <div className='card' onClick={toggleModal}>
-          <h2> Thanos</h2>
-          <p> Le plus grand des méchants</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Iron Man</h2>
-          <p> ddddddffff</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
+    <div className='favorite'>
+      <h1 className='Favorite-typo'>My Favorite Characters</h1>
 
-        <div className='card' onClick={toggleModal}>
-          <h2> Spider Man</h2>
-          <p>fsdfsffsdfd</p>
-        </div>
-      </div>
-    </body>
+      <Card />
+    </div>
   );
 }
 
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
index 8f0f890..b460552 100644
--- a/src/components/footer.jsx
+++ b/src/components/footer.jsx
@@ -3,29 +3,33 @@ import Socials from './socials.jsx';
 
 function Footer() {
   return (
-    <div className='footer'>
-      <img src='/pictures/marvel-logo.png' alt='marvel-logo' />
-      <div className='footer-nav'>
-        <div>
-          <a href='https://marvelofficial.com/shop/?srsltid=AfmBOorVehT8ELdv9CSRuSbn2YBFn_1tngBPVsIlMT4j70lF8KhpRGsb'>
-            Shops
-          </a>
-          <a href='https://www.disneyplus.com/brand/marvel?cid=DTCI-Synergy-Marvel-Site-Acquisition-Library-US-Marvel-NA-EN-NavFooter-Marvel_DisneyPlus_NavFooter_Evergreen-NA'>
-            Disney+
-          </a>
-        </div>
+    <>
+      <footer>
+        <div className='footer'>
+          <img src='\pictures\marvel-logo.png' alt='marvel-logo' />
+          <div className='footer-nav'>
+            <div>
+              <a href='https://marvelofficial.com/shop/?srsltid=AfmBOorVehT8ELdv9CSRuSbn2YBFn_1tngBPVsIlMT4j70lF8KhpRGsb'>
+                Shops
+              </a>
+              <a href='https://www.disneyplus.com/brand/marvel?cid=DTCI-Synergy-Marvel-Site-Acquisition-Library-US-Marvel-NA-EN-NavFooter-Marvel_DisneyPlus_NavFooter_Evergreen-NA'>
+                Disney+
+              </a>
+            </div>
 
-        <div>
-          <a href='https://marvelstory.fr/'>Blog</a>
-          <a href='https://www.marvelhq.com/'>Marvel.com</a>
-        </div>
-        <div>
-          <a href='https://www.marvel.com/corporate/advertising'>Advertising</a>
-          <a href='https://help.marvel.com/'>Help/Faq</a>
+            <div>
+              <a href='https://marvelstory.fr/'>Blog</a>
+              <a href='https://www.marvelhq.com/'>Marvel.com</a>
+            </div>
+            <div>
+              <a href='https://www.marvel.com/corporate/advertising'>Advertising</a>
+              <a href='https://help.marvel.com/'>Help/Faq</a>
+            </div>
+          </div>
+          <Socials />
         </div>
-      </div>
-      <Socials />
-    </div>
+      </footer>
+    </>
   );
 }
 
diff --git a/src/components/home.jsx b/src/components/home.jsx
new file mode 100644
index 0000000..f0e5c2c
--- /dev/null
+++ b/src/components/home.jsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+import '../style/home.scss';
+import Burger from './burger';
+import Card from './card';
+
+function Home() {
+  const [input, setInput] = useState('');
+
+  return (
+    <div className='home-page'>
+      <div>
+        <div className='burger-home'>
+          <Burger />
+          <img className='glass' src='/pictures/search.png' alt='' />
+          <input
+            className='search'
+            type='text'
+            placeholder='Search'
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+          />
+        </div>
+
+        <div className='main'>
+          <Card />
+        </div>
+      </div>
+      <nav className='arrow'>
+        <input type='image' id='arrows' alt='Login' src='/pictures/arrow-left.png' />
+        <input type='image' id='arrows' alt='Login' src='/pictures/arrow-right.png' />
+      </nav>
+    </div>
+  );
+}
+export default Home;
diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
index 1e4cfca..1cd59d9 100644
--- a/src/components/navbar.jsx
+++ b/src/components/navbar.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import '../style/navbar.scss';
 
@@ -6,23 +7,30 @@ function Navbar() {
   const [input, setInput] = useState('');
 
   return (
-    <nav>
-      <ul>
-        <li>
-          {' '}
-          <img src='/pictures/home.png' alt='' /> Home
-        </li>
+    <>
+      <header>
+        <nav className='navbar'>
+          <ul>
+            <li>
+              <Link to='/' className='myLink'>
+                <img src='\pictures\home.png' alt='' /> Home
+              </Link>
+            </li>
 
-        <li className='input-wrapper'>
-          <img src='/pictures/search.png' alt='' />
-          <input type='text' placeholder='Search' value={input} onChange={(e) => setInput(e.target.value)} />
-        </li>
-        <li>
-          <img src='/pictures/heart.png' alt='' />
-          Favorites
-        </li>
-      </ul>
-    </nav>
+            <li className='input-wrapper'>
+              <img src='\pictures\search.png' alt='' />
+              <input type='text' placeholder='Search' value={input} onChange={(e) => setInput(e.target.value)} />
+            </li>
+            <li>
+              <Link to='/favorites' className='myLink'>
+                <img src='\pictures\heart.png' alt='' />
+                Favorites
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </header>
+    </>
   );
 }
 
diff --git a/src/components/router-layout.jsx b/src/components/router-layout.jsx
new file mode 100644
index 0000000..a5ebba3
--- /dev/null
+++ b/src/components/router-layout.jsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+
+import Footer from './footer';
+import Navbar from './navbar';
+
+function Layout() {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+      <Footer />
+    </>
+  );
+}
+export default Layout;
diff --git a/src/main.jsx b/src/main.jsx
index 719805c..6b3555d 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
 import App from './app';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );
diff --git a/src/pages/home-page.jsx b/src/pages/home-page.jsx
deleted file mode 100644
index 5526b8c..0000000
--- a/src/pages/home-page.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useState } from 'react';
-
-import Burger from '../components/burger';
-import Card from '../components/card';
-import Footer from '../components/footer';
-import Navbar from '../components/navbar';
-import '../style/home-page.scss';
-
-function HomePage() {
-  const [input, setInput] = useState('');
-
-  return (
-    <div className='body'>
-      <header>
-        <Navbar />
-
-        <div className='burger-home'>
-          <Burger />
-          <img className='glass' src='/pictures/search.png' alt='' />
-          <input
-            className='search'
-            type='text'
-            placeholder='Search'
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-          />
-        </div>
-      </header>
-      <main className='main'>
-        <Card />
-      </main>
-      <footer className='footer'>
-        <Footer />
-      </footer>
-    </div>
-  );
-}
-export default HomePage;
diff --git a/src/pages/profile-page.jsx b/src/pages/profile-page.jsx
deleted file mode 100644
index 11c76a8..0000000
--- a/src/pages/profile-page.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import Profile from '../components/profile';
-
-export default function ProfilePage() {
-  return (
-    <div>
-      {' '}
-      <Profile />
-    </div>
-  );
-}
diff --git a/src/style/card.scss b/src/style/card.scss
index b44a982..e41fad3 100644
--- a/src/style/card.scss
+++ b/src/style/card.scss
@@ -52,16 +52,6 @@
   max-width: 1300px;
 }
 
-.arrow {
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-  margin-top: -324px;
-  height: 15%;
-  margin-left: 2%;
-  margin-right: 4%;
-}
-
 @media (max-width: 500px) {
   .flexBox {
     display: grid;
diff --git a/src/style/favorite-responsive.scss b/src/style/favorite-responsive.scss
new file mode 100644
index 0000000..47ed580
--- /dev/null
+++ b/src/style/favorite-responsive.scss
@@ -0,0 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
+
+@media (max-width: 500px) {
+  .favorite {
+    h1 {
+      background-color: red;
+      font-family: 'Aclonica', sans-serif;
+      margin-top: 30px;
+      width: 240px;
+      font-size: 15px;
+      padding: 14px;
+      border-radius: 10px;
+      margin-left: 20px;
+      color: white;
+      box-shadow: 0px 2px 6px black;
+      align-items: center;
+      text-shadow: 3px 2px 8px black;
+    }
+
+    .cards {
+      display: flex;
+
+      padding-left: 20px;
+      list-style: none;
+      margin-top: 20px;
+      justify-content: center;
+      justify-content: space-evenly;
+    }
+
+    .card {
+      border-radius: 10px;
+      width: 170px;
+      height: 230px;
+      padding-left: 20px;
+      background-color: red;
+    }
+
+    .open-modal {
+      width: 170px;
+      height: 230px;
+    }
+  }
+}
diff --git a/src/style/favorites.scss b/src/style/favorites.scss
index c786d9c..e95cfdf 100644
--- a/src/style/favorites.scss
+++ b/src/style/favorites.scss
@@ -1,10 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
 
 .favorite {
-  h1 {
-    background-color: red;
+  background: linear-gradient(#670208, #151414 25% 76%, #670208);
+
+  height: 690px;
+  padding-top: 60px;
+
+  .Favorite-typo {
+    background-color: #670208;
     font-family: 'Aclonica', sans-serif;
-    margin-top: 30px;
+    padding-top: 60px;
     width: 240px;
     font-size: 15px;
     padding: 14px;
@@ -15,27 +20,4 @@
     align-items: center;
     text-shadow: 3px 2px 8px black;
   }
-
-  .cards {
-    display: flex;
-
-    padding-left: 20px;
-    list-style: none;
-    margin-top: 20px;
-    justify-content: center;
-    justify-content: space-evenly;
-  }
-
-  .card {
-    border-radius: 10px;
-    width: 170px;
-    height: 230px;
-    padding-left: 20px;
-    background-color: red;
-  }
-
-  .open-modal {
-    width: 170px;
-    height: 230px;
-  }
 }
diff --git a/src/style/footer.scss b/src/style/footer.scss
index d36a88b..9008b5f 100644
--- a/src/style/footer.scss
+++ b/src/style/footer.scss
@@ -3,6 +3,9 @@
   justify-content: space-between;
   width: 100%;
   height: 100%;
+
+  background-color: #670208;
+  padding-top: 150px;
 }
 
 .footer > img {
diff --git a/src/style/home-page.scss b/src/style/home.scss
similarity index 77%
rename from src/style/home-page.scss
rename to src/style/home.scss
index 220e581..ff24d16 100644
--- a/src/style/home-page.scss
+++ b/src/style/home.scss
@@ -1,5 +1,7 @@
-.body {
+.home-page {
   background: linear-gradient(#670208, #151414 25% 76%, #670208);
+
+  height: 690px;
 }
 
 .burger-home {
@@ -9,8 +11,19 @@
   padding-top: 60px;
 }
 
-footer {
-  margin-top: 450px;
+.arrow {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin-top: -324px;
+  height: 15%;
+  margin-left: 2%;
+  margin-right: 4%;
+
+  #arrows {
+    width: 40px;
+    height: 40px;
+  }
 }
 
 @media (max-width: 500px) {
diff --git a/src/style/navbar.scss b/src/style/navbar.scss
index f0c8837..21df673 100644
--- a/src/style/navbar.scss
+++ b/src/style/navbar.scss
@@ -1,27 +1,37 @@
 @import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
 
-nav {
+.navbar {
   display: flex;
   justify-content: center;
+  background-color: #670208;
+  padding-top: 30px;
 
   ul {
     list-style: none;
     display: flex;
     align-items: center;
     padding: 20px;
-    gap: 190px;
+    gap: 40px;
 
+    .myLink {
+      color: white;
+      text-decoration: none;
+      display: flex;
+    }
     img {
       width: 23px;
       height: 23px;
-      margin-bottom: 04px;
+      margin-bottom: 05px;
       padding-right: 1px;
     }
 
     li {
       display: flex;
       align-items: center;
-      font-size: 20px;
+
+      /* padding:20 ; */
+      font-size: 22px;
+
       color: white;
       font-family: 'Aclonica', sans-serif;
       margin-left: 20px;