diff --git a/index.html b/index.html
index 9456b8b..6aba5cb 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/appLogo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Zest App</title>
   </head>
diff --git a/public/appLogo.ico b/public/appLogo.ico
new file mode 100644
index 0000000..c248279
Binary files /dev/null and b/public/appLogo.ico differ
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index ee0c7df..2dbf67c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
 import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { HomeLayout } from './layout';
+import './index.css';
 
 import { RecipeDetails } from './pages/recipeDetails';
 import { NotFound } from './pages/notFound';
@@ -26,9 +27,9 @@ const router = createBrowserRouter([
 const App = () => {
     return (
         <RouterProvider router={router}>
-            <Outlet classname='outlet' />
+            <Outlet classname="outlet" />
         </RouterProvider>
     );
 };
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index df709c8..63b9c10 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -6,7 +6,7 @@ const Footer = () => {
     const { isDarkTheme } = useGlobalContext();
 
     return (
-        <footer className={`${styles.footer} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
+        <footer className={`${styles.footer} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
             <section className={styles['logo-section']}>
                 <AppLogoComponent />
             </section>
@@ -19,7 +19,7 @@ const Footer = () => {
                         target="_blank"
                         rel="noreferrer"
                         href="https://github.com/chingu-voyages/v46-tier2-team-16/tree/main"
-                        title="External github repo link will open on a new tab"
+                        data-title="External github repo link will open on a new tab"
                     >
                         v46-tier2-team-16
                     </a>
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index f503f2d..a461747 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -110,11 +110,11 @@ a {
         color: #393838;
     }
 
-    a[title]:hover::after {
+    a[data-title]:hover::after {
         background-color: rgb(216, 172, 172);
         border-radius: 25px;
         color: #000;
-        content: attr(title);
+        content: attr(data-title);
         position: absolute;
         top: 1%;
         left: 12%;
@@ -182,4 +182,8 @@ a {
 .dark-theme {
     background-color: var(--dark-theme-background-color);
     color: var( --dark-theme-primary-text-color); 
+}
+
+.light-theme {
+    background-color: var(--light-theme-background-color);
 }
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index b7e5112..15e2255 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -7,7 +7,7 @@ const Header = () => {
     const { isDarkTheme } = useGlobalContext();
 
     return (
-        <header className={`${styles.header} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
+        <header className={`${styles.header} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
             <AppLogoComponent />
             <section>
                 <ToggleTheme />
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index 40f63cb..0ba39fc 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -18,6 +18,10 @@ header {
     color: var( --dark-theme-primary-text-color);
 }
 
+.light-theme {
+    background-color: var(--light-theme-background-color);
+}
+
 /* media query for desktop */
 @media only screen and (min-device-width: 768px) and (max-device-width: 6024px) {
     header {
diff --git a/src/components/Loader/Loader.module.css b/src/components/Loader/Loader.module.css
index 827d5c9..23a797c 100644
--- a/src/components/Loader/Loader.module.css
+++ b/src/components/Loader/Loader.module.css
@@ -18,6 +18,7 @@ h1 {
 	overflow: hidden;
 	white-space: nowrap;
 	animation: typing 1s steps(20, end), blink-caret .75s step-end infinite;
+
 }
 
 .loader {
@@ -27,20 +28,19 @@ h1 {
 	align-items: center;
 }
   
-@keyframes typing {
+ @keyframes typing {
 	from { width: 0; }
-	to { width: 100%; }
-}
+	to { width: 250px; }
+} 
 
-@keyframes blink-caret {
+ @keyframes blink-caret {
 	from, to { border-color: transparent; }
 	50% { border-color: black; }
-}
+} 
 
 .typing-text::after {
 	content: "|";
-	animation: blink-caret .75s step-end infinite;
-}
+	 animation: blink-caret .75s step-end infinite; }
 
 .dark-theme {
 	background-color: var(--dark-theme-background-color);
diff --git a/src/components/Recipe/Recipe.jsx b/src/components/Recipe/Recipe.jsx
index d8bfda0..e9610a7 100644
--- a/src/components/Recipe/Recipe.jsx
+++ b/src/components/Recipe/Recipe.jsx
@@ -7,21 +7,27 @@ import styles from './Recipe.module.css';
 const Recipe = (props) => {
     const { recipe, recipesToDisplay } = props;
     const { isDarkTheme } = useGlobalContext();
-    console.log('recipesToDisplay', recipesToDisplay)
+    console.log('recipesToDisplay', recipesToDisplay);
 
     return (
         <section className={`${styles.section} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
             {recipe.loading && <Loader />}
-            {!recipe.loading && recipesToDisplay.length === 0 ? (<p className={`${styles.noRecipe} ${isDarkTheme ? styles['dark-noRecipe'] : ''}`}>Sorry, no recipe to satisfy your papilles!</p>) : <></>}
+            {!recipe.loading && recipesToDisplay.length === 0 ? (
+                <p className={`${styles.noRecipe} ${isDarkTheme ? styles['dark-noRecipe'] : ''}`}>Sorry, no recipe to satisfy your papilles!</p>
+            ) : (
+                <></>
+            )}
             {!recipe.loading && recipesToDisplay ? (
                 <div className={styles.container}>
                     {recipesToDisplay.map((oneRecipe) => (
                         <RecipeCard key={oneRecipe.id} oneRecipe={oneRecipe} />
                     ))}
                 </div>
-            ) : <></>}
+            ) : (
+                <></>
+            )}
         </section>
     );
 };
 
-export default Recipe;
\ No newline at end of file
+export default Recipe;
diff --git a/src/components/Search/Search.module.css b/src/components/Search/Search.module.css
index 6f5dacb..647c656 100644
--- a/src/components/Search/Search.module.css
+++ b/src/components/Search/Search.module.css
@@ -24,7 +24,8 @@ p {
   display: flex;
   flex-direction: row;
   align-self: center;
-  height:fit-contentl
+  height: 40px;
+  width: 280px;
 }
 
 .containerInput{
@@ -37,12 +38,17 @@ p {
 
 input {
   border-radius: 100px;
-  border: solid 1px black;
+  border: solid 1px #303041;
   padding: 5px 10px 5px 10px;
   box-shadow:  0px 4px 6px rgba(0,0,0,0.1);
   margin-right: 3px;
   width: 100%;
-  height:30px;
+  height:100%;
+}
+
+input:focus {
+  outline: none !important;
+  border-color:#FFD900;
 }
 
 .visuallyHidden {
@@ -57,43 +63,46 @@ input {
 }
 
 .imgLoupe {
-  width:30px;
-  height:28px;
-  padding:2px;
+  width:40px;
+  height:38px;
+  padding:8px;
   border:none;
-  background-color:rgba(255, 235, 105, 1);
+  background-color:#FFD900;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
 }
 
 .imgReset {
-  width:30px;
-  height:30px;
-  padding:2px;
-  background-color:rgba(255, 235, 105, 1);
+  width:40px;
+  height:40px;
+  padding:8px;
+  background-color : #FFD900;
   border-radius: 100px;
   position: absolute;
   top: 1px;
   right: -3px;
+  box-shadow:  0px 4px 6px rgba(0,0,0,0.1);
+  border: solid 1px #303041;
+
 }
 
 .buttonLoupe {
   border: none;
   border-radius: 100px;
-  width: 30px;
-  height: 30px;
+  width: 35px;
+  height: 100%;
   /* margin-left: 3px; */
   position:absolute;
-  right: 4px;
+  right: 9px;
   top:1px;
   background-color: transparent;
 }
 
 .buttonReset {
   border-radius: 100px;
-  width: 30px;
-  height: 30px;
-  margin-left: 3px;
+  width: 35px;
+  height: 100%;
+  margin-left:20px;
   background-color: transparent;
   position: relative;
   border: none;
diff --git a/src/index.css b/src/index.css
index ca43ecb..5b241d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -53,6 +53,7 @@ body {
     overflow: auto;
     margin: 0;
     padding: 0;
+    height: 100vh;
 }
 
 /* media query for desktop */
diff --git a/src/layout/HomeLayout.jsx b/src/layout/HomeLayout.jsx
index 1efd443..87b6db6 100644
--- a/src/layout/HomeLayout.jsx
+++ b/src/layout/HomeLayout.jsx
@@ -10,11 +10,12 @@ const HomeLayout = () => {
   return (
     <>
       <Header />
-      <main className={`${styles.main} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
+      <main className={`${styles.main} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
         <Outlet className={styles.outlet} />
       </main>
       <Footer />
     </>
   );
 };
+
 export default HomeLayout;
\ No newline at end of file
diff --git a/src/layout/HomeLayout.module.css b/src/layout/HomeLayout.module.css
index c86ba55..62dd700 100644
--- a/src/layout/HomeLayout.module.css
+++ b/src/layout/HomeLayout.module.css
@@ -10,4 +10,8 @@ main {
 .dark-theme {
     background-color: var(--dark-theme-background-color);
     color: var( --dark-theme-primary-text-color);
+}
+
+.light-theme {
+    background-color: var(--light-theme-background-color);
 }
\ No newline at end of file
diff --git a/src/pages/recipeDetails/RecipeDetails.jsx b/src/pages/recipeDetails/RecipeDetails.jsx
index 48298dd..63b65da 100644
--- a/src/pages/recipeDetails/RecipeDetails.jsx
+++ b/src/pages/recipeDetails/RecipeDetails.jsx
@@ -18,7 +18,6 @@ const RecipeDetails = () => {
 
     const recipeById = useSelector((state) => state.recipeById);
     const selectedRecipe = recipeById.recipeById;
-
     return (
         <>
             {recipeById.loading && <Loader />}
