diff --git a/src/components/items.jsx b/src/components/items.jsx
index 63ef5b2..ebabedc 100644
--- a/src/components/items.jsx
+++ b/src/components/items.jsx
@@ -2,24 +2,30 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import star from './assets/star_icon.png'; 
 import stardull from './assets/star_dull_icon.png'; 
+import { TiPlus } from "react-icons/ti";
 
 const Item = (props) => {
     return (
-        <div className='w-[280px] hover:scale-105 transition duration-150 hover:shadow-2xl relative'>
+        <div className='shadow-md p-2 xl:p-3 rounded-lg xl:rounded-2xl w-[280px] hover:scale-105 transition duration-150 hover:shadow-2xl relative'>
             <Link to={`/product/${props.id}`} onClick={() => window.scrollTo(0, 0)}>
-                <img className='w-full h-auto' src={props.image} alt={props.name} />
+                <img className='rounded-md xl:rounded-lg shadow w-full h-auto' src={props.image} alt={props.name} />
             </Link>
             <p className='mt-2 mb-2 text-center'>{props.name}</p>
-            <div className='item-prices flex justify-between items-center'>
-                <div className='item-price-new text-[#374151] text-[18px] font-bold'>
-                    ${props.new_price}
+            <div className='flex items-center justify-between'>
+                <div className='item-prices flex gap-2 items-center'>
+                    <div className='item-price-new text-[#374151] text-[18px] font-bold'>
+                        ${props.new_price}
+                    </div>
+                    <div className='items-price-old text-[#8c8c8c] text-[18px] font-semibold line-through'>
+                        ${props.old_price}
+                    </div>
                 </div>
-                <div className='items-price-old text-[#8c8c8c] text-[18px] font-semibold line-through'>
-                    ${props.old_price}
+                <div className='flex items-center justify-center rounded-full bg-gradient-to-r from-[#5A585A] to-[#090947] h-5 w-5'>
+                    <TiPlus color="white" />
                 </div>
             </div>
 
-            <div className='flex items-center justify-start gap-1 mt-2'>
+            <div className='flex items-center justify-start gap-1 mt-3'>
                 {Array.from({ length: 5 }, (_, index) => (
                     <img
                         key={index}
@@ -31,8 +37,8 @@ const Item = (props) => {
             </div>
 
             {/* Review Count */}
-            <div className='text-black text-sm text-left mt-1 ml-1'>
-                ({props.reviewCount} reviews)
+            <div className='text-[#8c8c8c] font-extrabold text-xs text-left mt-1 ml-1'>
+                {props.reviewCount} reviews
             </div>
             
         </div>
diff --git a/src/pages/ShopCategory.jsx b/src/pages/ShopCategory.jsx
index fa7127c..f6856b5 100644
--- a/src/pages/ShopCategory.jsx
+++ b/src/pages/ShopCategory.jsx
@@ -30,7 +30,7 @@ const ShopCategory = (props) => {
       </div>
 
       {/* Updated grid settings for spacing on mobile */}
-      <div className='mt-[20px] mb-[20px] mx-10 md:mx-40 grid grid-cols-2 md:grid-cols-4 gap-5'>
+      <div className='mt-[20px] mb-[20px] mx-10 md:mx-40 flex flex-wrap justify-center gap-6'>
         {all_product.map((item, i) => {
           if (props.category === item.category) {
             return (