diff --git a/src/Components/Assets/data.js b/src/Components/Assets/data.js
index e655c38..71a8d37 100644
--- a/src/Components/Assets/data.js
+++ b/src/Components/Assets/data.js
@@ -1,33 +1,36 @@
-import p1_img from './product_1.png'
-import p2_img from './product_2.png'
-import p3_img from './product_3.png'
-import p4_img from './product_4.png'
+import p1_img from "./product_1.png";
+import p2_img from "./product_2.png";
+import p3_img from "./product_3.png";
+import p4_img from "./product_4.png";
 
 let data_product = [
   {
-    id:1,
-    name:"Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse",
-    image:p1_img,
-    new_price:50.00,
-    old_price:80.50,
+    id: 1,
+    name: "Womens Printed Full Sleeve Collared Neck Casual Jacket",
+    image: p1_img,
+    new_price: 50.0,
+    old_price: 80.5,
   },
-  {id:2,
-    name:"Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse",
-    image:p2_img,
-    new_price:85.00,
-    old_price:120.50,
+  {
+    id: 2,
+    name: "Plain Round Neck Rib Knit Regular Top for Women",
+    image: p2_img,
+    new_price: 85.0,
+    old_price: 120.5,
   },
-  {id:3,
-    name:"Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse",
-    image:p3_img,
-    new_price:60.00,
-    old_price:100.50,
+  {
+    id: 3,
+    name: "Women's Polyester Sports Bra",
+    image: p3_img,
+    new_price: 60.0,
+    old_price: 100.5,
   },
-  {id:4,
-    name:"Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse",
-    image:p4_img,
-    new_price:100.00,
-    old_price:150.00,
+  {
+    id: 4,
+    name: "Women's Fall Batwing Half Sleeve Shirts Boat Neck",
+    image: p4_img,
+    new_price: 100.0,
+    old_price: 150.0,
   },
 ];
 
diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css
index b014b43..9ada951 100644
--- a/src/Components/Navbar/Navbar.css
+++ b/src/Components/Navbar/Navbar.css
@@ -1,25 +1,29 @@
-.navbar{
+.navbar {
     display: flex;
     justify-content: space-around;
     padding: 16px;
     box-shadow: 0 1px 3px -2px black;
 }
-.nav-logo{
+
+.nav-logo {
     display: flex;
     align-items: center;
     gap: 10px;
 }
+
 .nav-logo-link {
     display: flex;
     align-items: center;
     text-decoration: none;
-  }  
-.nav-logo{
+}
+
+.nav-logo {
     color: #171717;
     font-size: 38px;
     font-weight: 600;
 }
-.nav-menu{
+
+.nav-menu {
     display: flex;
     align-items: center;
     list-style: none;
@@ -28,7 +32,8 @@
     font-size: 20px;
     font-weight: 500;
 }
-.nav-menu li{
+
+.nav-menu li {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -36,24 +41,30 @@
     gap: 3px;
     cursor: pointer;
 }
-.nav-menu li a{text-decoration: none;}
-.nav-menu hr{
+
+.nav-menu li a {
+    text-decoration: none;
+}
+
+.nav-menu hr {
     border: none;
     width: 80%;
     height: 3px;
     border-radius: 10px;
     background: #ff4141;
 }
-.nav-login-cart{
+
+.nav-login-cart {
     display: flex;
     align-items: center;
-    gap:45px;
+    gap: 45px;
 }
-.nav-login-cart .log_btn{
+
+.nav-login-cart .log_btn {
     width: 157px;
     height: 58px;
     outline: none;
-    border:1px solid #7a7a7a;
+    border: 1px solid #7a7a7a;
     border-radius: 75px;
     color: #515151;
     font-size: 20px;
@@ -61,10 +72,12 @@
     background: white;
     cursor: pointer;
 }
-.nav-login-cart  .log_btn:active{
+
+.nav-login-cart .log_btn:active {
     background: #f3f3f3;
 }
-.nav-cart-count{
+
+.nav-cart-count {
     width: 22px;
     height: 22px;
     display: flex;
@@ -77,44 +90,53 @@
     background: red;
     color: white;
 }
-.dark_btn{
+
+.dark_btn {
     width: 50px;
     height: 50px;
 }
-.dark{
+
+.dark {
     background: linear-gradient(180deg, black, #e1ffea22 90%);
 }
-.pnav_dark{
+
+.pnav_dark {
     color: #171717;
     font-size: 38px;
     font-weight: 600;
 }
-.pnav_light{
+
+.pnav_light {
     color: white;
     font-size: 38px;
     font-weight: 600;
 }
-.cart{
+
+.cart {
     width: 42px;
     height: 42px;
 }
-button{
+
+button {
     border: none;
 }
 
-.toggle_dark{
-  background-color:orange;
-  color: white;
+.toggle_dark {
+    background-color: orange;
+    color: white;
 }
-.toggle_light{
+
+.toggle_light {
     background-color: #515151;
     color: white;
 }
-.change{
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
+
+.change {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
 }
+
 .toggle_dark {
     background-color: rgb(232, 212, 177);
     color: white;
@@ -139,6 +161,4 @@ button{
 .change img {
     width: 80%;
     height: auto;
-}
-
-
+}
\ No newline at end of file
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
index d5adea5..41c25b6 100644
--- a/src/Components/Navbar/Navbar.jsx
+++ b/src/Components/Navbar/Navbar.jsx
@@ -1,70 +1,90 @@
-import React, { useContext, useState } from 'react';
-import './Navbar.css';
-import logo from '../Assets/logo.png';
-import cart_icon from '../Assets/cart_icon.png';
-import cart_icon_dark from '../Assets/cart_icon_dark.png';
-import moonIcon from '../Assets/dark_mode.png';
-import sunIcon from '../Assets/light_mode.png';
-import { Link } from 'react-router-dom';
-import { ShopContext } from '../../Context/ShopContext';
+import React, { useContext, useState } from "react";
+import "./Navbar.css";
+import logo from "../Assets/logo.png";
+import cart_icon from "../Assets/cart_icon.png";
+import cart_icon_dark from "../Assets/cart_icon_dark.png";
+import moonIcon from "../Assets/dark_mode.png";
+import sunIcon from "../Assets/light_mode.png";
+import { Link } from "react-router-dom";
+import { ShopContext } from "../../Context/ShopContext";
+import { MdHeight } from "react-icons/md";
 
 const Navbar = () => {
-    const [icon, setIcon] = useState(cart_icon);
-    const [menu, setMenu] = useState("shop");
-    const { getTotalCartItems, theme, setTheme } = useContext(ShopContext);
+  const [icon, setIcon] = useState(cart_icon);
+  const [menu, setMenu] = useState("shop");
+  const { getTotalCartItems, theme, setTheme } = useContext(ShopContext);
 
-    const toggle = () => {
-        if (theme === "dark") {
-            setTheme("light");
-            setIcon(cart_icon_dark);
-            const dnav = document.getElementById("nav");
-            dnav.classList.add("dark");
-        } else {
-            setTheme("dark");
-            setIcon(cart_icon);
-            const dnav = document.getElementById("nav");
-            dnav.classList.remove("dark");
-        }
-    };
+  const toggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+      setIcon(cart_icon_dark);
+      const dnav = document.getElementById("nav");
+      dnav.classList.add("dark");
+    } else {
+      setTheme("dark");
+      setIcon(cart_icon);
+      const dnav = document.getElementById("nav");
+      dnav.classList.remove("dark");
+    }
+  };
 
-    return (
-        <div className={`navbar`} id="nav">
-            <div className="nav-logo">
-                <Link className="nav-logo-link" to="/">
-                    <img src={logo} alt="ShopNex Logo" style={{ marginRight: '10px' }} />
-                    <p className={`pnav_${theme}`}>ShopNex</p>
-                </Link>
-            </div>
-            <ul className="nav-menu">
-                <li onClick={() => { setMenu("shop") }}>
-                    <Link to='/'>Shop</Link>
-                    {menu === "shop" ? <hr /> : <></>}
-                </li>
-                <li onClick={() => { setMenu("men") }}>
-                    <Link to='/men'>Men</Link>
-                    {menu === "men" ? <hr /> : <></>}
-                </li>
-                <li onClick={() => { setMenu("women") }}>
-                    <Link to='/women'>Women</Link>
-                    {menu === "women" ? <hr /> : <></>}
-                </li>
-                <li onClick={() => { setMenu("kids") }}>
-                    <Link to='/kids'>Kids</Link>
-                    {menu === "kids" ? <hr /> : <></>}
-                </li>
-            </ul>
-            <div className="nav-login-cart">
-                <Link to='/login'><button className='log_btn'>Login</button></Link>
-                <Link to='/cart'><img src={icon} alt="" className='cart' /></Link>
-                <div className="nav-cart-count">{getTotalCartItems()}</div>
-                <div className='dark_btn'>
-                    <button onClick={toggle} className={`toggle_${theme} change`}>
-                        {theme === 'light' ? <img src={sunIcon}  /> : <img src={moonIcon}  />}
-                    </button>
-                </div>
-            </div>
+  return (
+    <div className={`navbar`} id="nav">
+      <div className="nav-logo">
+        <Link className="nav-logo-link" to="/">
+          <img src={logo} alt="ShopNex Logo" style={{ marginRight: "10px" }} />
+          <p className={`pnav_${theme}`}>ShopNex</p>
+        </Link>
+      </div>
+      <ul className="nav-menu">
+        <li
+          onClick={() => {
+            setMenu("shop");
+          }}>
+          <Link to="/">
+            <i class="fa-brands fa-shopify"></i>
+            Shop
+          </Link>
+          {menu === "shop" ? <hr /> : <></>}
+        </li>
+        <li
+          onClick={() => {
+            setMenu("men");
+          }}>
+          <Link to="/men">Men</Link>
+          {menu === "men" ? <hr /> : <></>}
+        </li>
+        <li
+          onClick={() => {
+            setMenu("women");
+          }}>
+          <Link to="/women">Women</Link>
+          {menu === "women" ? <hr /> : <></>}
+        </li>
+        <li
+          onClick={() => {
+            setMenu("kids");
+          }}>
+          <Link to="/kids">Kids</Link>
+          {menu === "kids" ? <hr /> : <></>}
+        </li>
+      </ul>
+      <div className="nav-login-cart">
+        <Link to="/login">
+          <button className="log_btn">Login</button>
+        </Link>
+        <Link to="/cart">
+          <img src={icon} alt="" className="cart" />
+        </Link>
+        <div className="nav-cart-count">{getTotalCartItems()}</div>
+        <div className="dark_btn">
+          <button onClick={toggle} className={`toggle_${theme} change`}>
+            {theme === "light" ? <img src={sunIcon} /> : <img src={moonIcon} />}
+          </button>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+};
 
 export default Navbar;
diff --git a/src/Components/NewCollections/NewCollections.css b/src/Components/NewCollections/NewCollections.css
index f1342a4..4165f13 100644
--- a/src/Components/NewCollections/NewCollections.css
+++ b/src/Components/NewCollections/NewCollections.css
@@ -5,38 +5,65 @@
     gap: 20px;
     margin-bottom: 100px;
 }
+
 .new-collections .h1_dark {
     color: #171717;
     font-size: 30px;
     font-weight: 600;
 }
 
-.h1_light{
+.h1_light {
     color: white;
     font-size: 30px;
     font-weight: 600;
 }
 
-.new-collections hr{
+.new-collections hr {
     width: 200px;
     height: 6px;
     border-radius: 10px;
 }
 
-.hr_dark{
+.hr_dark {
     background: #252525;
 }
-.hr_light{
+
+.hr_light {
     background: white;
 }
-.new-collections-item{
+
+.new-collections-item {
     margin-top: 50px;
     display: flex;
     gap: 30px;
 }
-.collections{
+
+.collections {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
+
     margin-top: 50px;
     gap: 30px;
 }
+
+.collections .item {
+    background-color: rgb(250, 239, 250);
+    border-radius: 19px;
+
+}
+
+.collections .item .pit_dark {
+    padding-left: 13px;
+    font-weight: bold;
+}
+
+.collections .item .item-prices {
+    padding-left: 13px;
+    padding-bottom: 8px;
+}
+
+
+
+.collections .item a img {
+    border-radius: 19px;
+}
\ No newline at end of file
diff --git a/src/Components/Popular/Popular.css b/src/Components/Popular/Popular.css
index 5a9fe0c..01916b0 100644
--- a/src/Components/Popular/Popular.css
+++ b/src/Components/Popular/Popular.css
@@ -5,34 +5,60 @@
     gap: 30px;
     margin-bottom: 100px;
 }
+
 .popular .h1p_dark {
     color: #171717;
     font-size: 30px;
     font-weight: 600;
 }
 
-.h1p_light{
+.h1p_light {
     color: white;
     font-size: 30px;
     font-weight: 600;
 }
 
-.popular .hrp_dark{
+.popular .hrp_dark {
     width: 200px;
     height: 6px;
     border-radius: 10px;
     background: #252525;
 }
 
-.hrp_light{
+.hrp_light {
     width: 200px;
     height: 6px;
     border-radius: 10px;
     background: white;
 }
 
-.popular-item{
+.popular-item {
     margin-top: 50px;
     display: flex;
     gap: 30px;
+
+}
+
+.popular-item .item {
+    background-color: rgb(250, 239, 250);
+    border-radius: 19px;
+
+}
+
+.popular-item .item:hover {
+    cursor: pointer;
+}
+
+.popular-item .item .pit_dark {
+    padding-left: 13px;
+    font-weight: bold;
 }
+
+.popular-item .item .item-prices {
+    padding-left: 13px;
+    padding-bottom: 8px;
+}
+
+.popular-item .item a img {
+    border-radius: 19px;
+}
\ No newline at end of file