diff --git a/src/Components/Home/BoseHeadphones.tsx b/src/Components/Home/BoseHeadphones.tsx
index 23faf71..56e7337 100644
--- a/src/Components/Home/BoseHeadphones.tsx
+++ b/src/Components/Home/BoseHeadphones.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { RiArrowRightUpFill } from "react-icons/ri";
+import { Link } from "react-router-dom";
 
 const BoseHeadphones = () => {
   const {t} = useTranslation();
@@ -9,10 +10,12 @@ const BoseHeadphones = () => {
       <div>
         <h6>{t("Bose Headphones")}</h6>
         <h1>{t("Smarter than your average headphones")}</h1>
-        <button className="button">
-          {t("Shop now")}
-          <RiArrowRightUpFill />
-        </button>
+        <Link to="/categories" >
+          <button className="button">
+            {t("Shop now")}
+            <RiArrowRightUpFill />
+          </button>
+        </Link>
       </div>
     </div>
   );
diff --git a/src/Styles/Page/Home.scss b/src/Styles/Page/Home.scss
index 80d1171..9f6f4f6 100644
--- a/src/Styles/Page/Home.scss
+++ b/src/Styles/Page/Home.scss
@@ -10,8 +10,8 @@
     &::after {
       position: absolute;
       content: "";
-      right: 0;
       top: 0;
+      right: 0;
       background: url("../../../public/Home/HeroShape.svg");
       background-size: cover;
       background-repeat: no-repeat;
@@ -545,6 +545,11 @@
 
   .home_page{
      .HeroSection {
+      &::after{
+        scale: -1;
+        right: auto;
+        left: 0 !important;
+      }
     > div {
       display: flex;
       flex-direction: column;