diff --git a/public/assets/images/products/project2.png b/public/assets/images/products/project2.png
new file mode 100644
index 0000000..06487be
Binary files /dev/null and b/public/assets/images/products/project2.png differ
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 426841d..afb9d3f 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import React, { useState, useEffect } from 'react';
 import Logo from "@images/logo-white.svg";
 import LogoDarkHeader from "@images/logo-dark.svg";
@@ -8,6 +8,8 @@ const Header = () => {
   const [scrolled, setScrolled] = useState(false);
   const [isOpen, setOpen] = useState(false);
 
+  const location = useLocation();
+
   const handleScroll = () => {
     const offset = window.scrollY;
     if(offset > 10) {
@@ -25,15 +27,17 @@ const Header = () => {
   }, []);
 
   const headerClasses = scrolled ? 'header-area scrolled' : 'header-area';
+  const isProductsPage = location.pathname === '/products';
+  const switchHeader = isProductsPage ? 'header-area switched' : '';
 
   return (
-    <header className={headerClasses}>
+    <header className={switchHeader || headerClasses }>
       <div className="container">
         <div className="row">
           <div className="col-lg-12">
             <nav className="main-nav">
               <Link to="/" className="logo">
-                <img src={scrolled ? LogoDarkHeader : Logo} className="light-logo" alt="Beapp" />
+                <img src={switchHeader || scrolled ? LogoDarkHeader : Logo} className="light-logo" alt="Beapp" />
                 <img
                   src={LogoDarkHeader}
                   className="dark-logo"
@@ -42,22 +46,22 @@ const Header = () => {
               </Link>
               <ul className="nav">
                 <li>
-                  <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to='/'>HOME</Link>
+                  <Link style={{ color: switchHeader || scrolled ? '#3B566E' : 'white' }} to='/'>HOME</Link>
                 </li>
                 <li>
-                  <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to="/products">PRODUCTS</Link>
+                  <Link style={{ color: switchHeader || scrolled ? '#3B566E' : 'white' }} to="/products">PRODUCTS</Link>
                 </li>
                 <li>
-                  <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to='/aboutus'>ABOUT US</Link>
+                  <Link style={{ color: switchHeader ||  scrolled ? '#3B566E' : 'white' }} to='/aboutus'>ABOUT US</Link>
                 </li>
                 <li>
-                  <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to="/services">SERVICES</Link>
+                  <Link style={{ color: switchHeader || scrolled ? '#3B566E' : 'white' }} to="/services">SERVICES</Link>
                 </li>
                 {/* <li> */}
                 {/*   <a style={{ color: scrolled ? '#3B566E' : 'white' }} href="blog.html">BLOG</a> */}
                 {/* </li> */}
                 <li>
-                  <Link style={{ border: scrolled ? '1px solid #4886FF' : '1px solid white', color: scrolled ? '#4886FF' : 'white' }} to="/contact" className="btn-nav-line">
+                  <Link style={{ border: switchHeader || scrolled ? '1px solid #4886FF' : '1px solid white', color: switchHeader || scrolled ? '#4886FF' : 'white' }} to="/contact" className="btn-nav-line">
                     CONTACT
                   </Link>
                 </li>
diff --git a/src/components/Header/_header.scss b/src/components/Header/_header.scss
index 13b7930..e32e4ab 100644
--- a/src/components/Header/_header.scss
+++ b/src/components/Header/_header.scss
@@ -22,6 +22,12 @@ header
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
+
+.header-area.switched {
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
 .header-area .main-nav .logo {
   float: left;
   // margin-top: 30px;
diff --git a/src/pages/Home/_home.scss b/src/pages/Home/_home.scss
index de370fb..fc17bc6 100644
--- a/src/pages/Home/_home.scss
+++ b/src/pages/Home/_home.scss
@@ -227,7 +227,7 @@ home
   float: left;
   width: 68px;
   min-height: 150px;
-  background: url('../../../public/assets/images/features-bg.svg') center bottom no-repeat;
+  background: url('/assets/images/features-bg.svg') center bottom no-repeat;
 }
 .features li .count span {
   display: block;
diff --git a/src/pages/Products/Products.jsx b/src/pages/Products/Products.jsx
index bf2a64c..25ad778 100644
--- a/src/pages/Products/Products.jsx
+++ b/src/pages/Products/Products.jsx
@@ -23,6 +23,20 @@ const Products = () => {
 					</div>
 				</div>
 				</Link>
+
+				<Link to='/'>
+					<div className='products__box'>
+					<div className='products__content'>
+						<h3 className='products__title--content'>FDA-compliant software for stroke patients with telemedicine features to facilitate remote care</h3>
+						<span className='products__devices'>IOS & Android, Web</span>
+						<span className='products__category'>Healthcare</span>
+						<span className='products__country'>US</span>
+						<div className='products__button-link'>
+						<Link className='products__link' to='/'>Explore more  <i className="fa fa-arrow-right"></i> </Link>
+						</div>
+					</div>
+				</div>
+				</Link>
 			</div>
 		</section>
 		</>
diff --git a/src/pages/Products/_products.scss b/src/pages/Products/_products.scss
index e823138..59dd02a 100644
--- a/src/pages/Products/_products.scss
+++ b/src/pages/Products/_products.scss
@@ -5,11 +5,16 @@
 	margin-top: 70px;
 	height: 568px;
 
-	background-image: url('../../../public/assets/images/products/project1.png');	
+	background-image: url('/assets/images/products/project1.png');	
 	background-position: right;
 	background-size: cover;
 	background-color: #161413;
 	border-radius: 32px;
+	transition: opacity 0.1s ease-out;
+
+	&:hover {
+		opacity: 0.97;
+	}
 
 	&:hover .products__link {
 		color: #cecbca;
@@ -21,7 +26,7 @@
 }
 
 .products__content {
-	width: 550px;
+	width: 600px;
 	padding: 40px;
 }
 
@@ -55,4 +60,43 @@
 	&:hover {
 		color: #cecbca;
 	}
+}
+
+// MEDIA
+@media only screen and (max-width: 991px) {
+	.products__title {
+		font-size: 60px;
+	}
+
+	.products__content {
+		width: 100%;
+		border-radius: 32px;
+		background: rgba(22,20,19,.698);
+	}
+}
+
+@media only screen and (max-width: 500px) {
+	.products__box {
+		margin-top: 40px;
+	}
+
+	.products__title {
+		font-size: 40px;
+	}
+
+	.products__content {
+		padding: 15px;
+	}
+
+	.products__title--content {
+		font-size: 25px;
+	}
+}
+
+@media only screen and (max-width: 350px) {
+	.products__content span {
+		width: fit-content;
+		display: block;
+		margin-bottom: 10px;
+	}
 }
\ No newline at end of file