diff --git a/src/Components/Hero/Hero.css b/src/Components/Hero/Hero.css
index c4ec4b7..be041aa 100644
--- a/src/Components/Hero/Hero.css
+++ b/src/Components/Hero/Hero.css
@@ -61,8 +61,15 @@
     color: white;
     font-size: 22px;
     font-weight: 500;
+    cursor: pointer;
 
 }
+.hero-latest-btn:hover
+{
+    background: #d30202;
+    color: white;
+    border: 2px solid #ff4141;
+}
 .hero-right{
     flex:1;
     display: flex;
diff --git a/src/Components/Hero/Hero.jsx b/src/Components/Hero/Hero.jsx
index 8a59f7a..ee47876 100644
--- a/src/Components/Hero/Hero.jsx
+++ b/src/Components/Hero/Hero.jsx
@@ -1,26 +1,27 @@
-import React, { useContext } from 'react'
-import './Hero.css'
-import hand_icon from '../Assets/hand_icon.png'
-import arrow_icon from '../Assets/arrow.png'
-import hero_image from '../Assets/hero_image.png'
-import { ShopContext } from '../../Context/ShopContext'
+// Hero.jsx
+import React, { useContext } from 'react';
+import './Hero.css';
+import hand_icon from '../Assets/hand_icon.png';
+import arrow_icon from '../Assets/arrow.png';
+import hero_image from '../Assets/hero_image.png';
+import { ShopContext } from '../../Context/ShopContext';
 
-const Hero = () => {
-    const {theme}=useContext(ShopContext)
+const Hero = ({ scrollToNewCollections }) => {
+    const { theme } = useContext(ShopContext);
     return (
-        <div className={'hero_'+theme}>
+        <div className={'hero_' + theme}>
             <div className="hero-left">
-                <h2  className={'h2h_'+theme}>NEW ARRIVALS ONLY</h2>
+                <h2 className={'h2h_' + theme}>NEW ARRIVALS ONLY</h2>
                 <div>
                     <div className="hero-hand-icon">
-                        <p className={'ph_'+theme}>New</p>
+                        <p className={'ph_' + theme}>New</p>
                         <img src={hand_icon} alt="" />
                     </div>
-                    <p className={'ph_'+theme}>Collections</p>
-                    <p className={'ph_'+theme}>For Everyone</p>
+                    <p className={'ph_' + theme}>Collections</p>
+                    <p className={'ph_' + theme}>For Everyone</p>
                 </div>
-                <div className="hero-latest-btn">
-                    <div className={'div_'+theme}>Latest Collection</div>
+                <div className="hero-latest-btn" onClick={scrollToNewCollections}>
+                    <div className={'div_' + theme}>Latest Collection</div>
                     <img src={arrow_icon} alt="" />
                 </div>
             </div>
@@ -28,7 +29,7 @@ const Hero = () => {
                 <img src={hero_image} alt="" />
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default Hero
+export default Hero;
diff --git a/src/Components/NewCollections/NewCollections.jsx b/src/Components/NewCollections/NewCollections.jsx
index 33ed9af..2de4db0 100644
--- a/src/Components/NewCollections/NewCollections.jsx
+++ b/src/Components/NewCollections/NewCollections.jsx
@@ -1,3 +1,4 @@
+//Newcollections.jsx
 import React, { useContext } from 'react'
 import './NewCollections.css'
 import new_collection from '../Assets/new_collections'
diff --git a/src/Pages/Shop.jsx b/src/Pages/Shop.jsx
index f9c6869..40a0487 100644
--- a/src/Pages/Shop.jsx
+++ b/src/Pages/Shop.jsx
@@ -1,21 +1,33 @@
-import React from 'react'
-import Hero from '../Components/Hero/Hero'
-import Popular from '../Components/Popular/Popular'
-import Offers from '../Components/Offers/Offers'
-import NewCollections from '../Components/NewCollections/NewCollections'
-import NewsLetter from '../Components/NewsLetter/NewsLetter'
-import Footer from '../Components/Footer/Footer'
+// Shop.jsx
+import React, { useRef } from 'react';
+import Hero from '../Components/Hero/Hero';
+import Popular from '../Components/Popular/Popular';
+import Offers from '../Components/Offers/Offers';
+import NewCollections from '../Components/NewCollections/NewCollections';
+import NewsLetter from '../Components/NewsLetter/NewsLetter';
+import Footer from '../Components/Footer/Footer';
 
 const Shop = () => {
+  const newCollectionsRef = useRef(null);
+
+  const scrollToNewCollections = () => {
+    if (newCollectionsRef.current) {
+      newCollectionsRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   return (
     <div>
-      <Hero/>
-      <Popular/>
-      <Offers/>
-      <NewCollections/>
-      <NewsLetter/>
+      <Hero scrollToNewCollections={scrollToNewCollections} />
+      <Popular />
+      <Offers />
+      <div ref={newCollectionsRef}>
+        <NewCollections />
+      </div>
+      <NewsLetter />
+      <Footer />
     </div>
-  )
-}
+  );
+};
 
-export default Shop
+export default Shop;