diff --git a/app/(main)/auction/components/NFTDetail.tsx b/app/(main)/auction/components/NFTDetail.tsx
index a5454e2..8754658 100644
--- a/app/(main)/auction/components/NFTDetail.tsx
+++ b/app/(main)/auction/components/NFTDetail.tsx
@@ -173,34 +173,34 @@ const NftBid = () => {
 
                         {/* Sales Deadline */}
                         <div className="text-center py-1">
-                            <p className="text-gray-400 text-sm">Sales deadline | 1d 9h left</p>
+                            <p className="text-gray-400 text-sm">Sales deadline <span className="px-2.5">|</span> 1d 9h left</p>
                         </div>
 
                         {/* Creator and Owner */}
-                        <div className="flex flex-col sm:flex-row items-center justify-between py-4 border-y border-darkerGray">
+                        <div className="flex  items-center justify-between py-4 border-y border-darkerGray">
                             <div className="flex items-center gap-4">
-                                <Image src={"/creator_nft.png"} alt="" width={60} height={60} />
+                                <Image src={"/creator_nft.png"} alt="" width={60} height={60} className="h-8 w-8 sm:w-[60px] sm:h-[60px]"/>
                                 <div>
-                                    <p className="text-lg tracking-wider">x0023y...yrte</p>
+                                    <p className="text-base sm:text-lg tracking-wider">x0023y...yrte</p>
                                     <p className="text-gray-400 text-sm tracking-wider">Creator</p>
                                 </div>
                             </div>
 
-                            <div className="hidden sm:block">
+                            <div className="block">
                                 <ArrowRight className="w-6 h-6 text-gray-400" />
                             </div>
 
                             <div className="flex items-center gap-3">
-                                <Image src={"/new_owner.png"} alt="" width={60} height={60} />
+                                <Image src={"/new_owner.png"} alt="" width={60} height={60} className="h-8 w-8 sm:w-[60px] sm:h-[60px]" />
                                 <div>
-                                    <p className="text-lg tracking-wider">x0023y...yrte</p>
+                                    <p className="text-base sm:text-lg tracking-wider">x0023y...yrte</p>
                                     <p className="text-gray-400 text-sm tracking-wider">New Owner</p>
                                 </div>
                             </div>
                         </div>
 
                         {/* Share */}
-                        <div className="flex items-center gap-4 pb-2 border-b border-darkerGray">
+                        <div className="flex items-center gap-4 pb-3 pt-1 border-b border-darkerGray">
                             <span className="text-gray-400 text-sm">Share</span>
                             <div className="flex gap-2 text-white">
                                 <button className="w-8 h-8 bg-gray-500 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors"
@@ -214,7 +214,7 @@ const NftBid = () => {
                         </div>
 
                         {/* Action Buttons */}
-                        <div className="space-y-3">
+                        <div className="space-y-4 pt-2">
                             <button className="w-full bg-purple text-white font-semibold py-4 rounded-xl transition-colors">
                             Buy Now
                             </button>
@@ -230,9 +230,9 @@ const NftBid = () => {
             </div>
 
             {/* Tab Content Section */}
-            <div className="w-full">
+            <div className="w-full mt-7 sm:m-auto">
                 {/* Tab Navigation */}
-                <div className="w-1/2 flex bg-[#1C1D1F] overflow-x-auto rounded-lg p-3">
+                <div className="w-full  sm:w-1/2 flex justify-between sm:justify-start bg-[#1C1D1F] overflow-x-auto rounded-lg p-3">
                     <button
                         onClick={() => setActiveTab('description')}
                         className={`px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${activeTab === 'description'
@@ -263,7 +263,7 @@ const NftBid = () => {
                 </div>
 
                 {/* Page Content */}
-                <div className="py-4 md:py-6">
+                <div className="py-7">
                     {renderPage()}
                 </div>
             </div>
diff --git a/app/(main)/auction/components/nft_collection_card_data.tsx b/app/(main)/auction/components/nft_collection_card_data.tsx
index 0f65842..fe7aa9b 100644
--- a/app/(main)/auction/components/nft_collection_card_data.tsx
+++ b/app/(main)/auction/components/nft_collection_card_data.tsx
@@ -82,7 +82,7 @@ const NFTCollectionSection = () => {
       {/* If you want even larger cards, use this version */}
 
       <div className="w-full">
-        <div className="block md:block lg:grid lg:grid-cols-4 gap-6 w-full">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 w-full">
           {nftCollectionData.map((nft) => (
             <NFTCollectionCard key={nft.id} data={nft} />
           ))}
diff --git a/app/(main)/auction/components/nftcollectioncard.tsx b/app/(main)/auction/components/nftcollectioncard.tsx
index fc0267b..e1975ad 100644
--- a/app/(main)/auction/components/nftcollectioncard.tsx
+++ b/app/(main)/auction/components/nftcollectioncard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
+import { Heart } from 'lucide-react';
 
 interface NFTCardData {
   id: number;
@@ -20,7 +21,7 @@ interface NFTCollectionCardProps {
 
 const NFTCollectionCard: React.FC<NFTCollectionCardProps> = ({ data }) => {
   return (
-    <div className="border border-darkerGray rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300 p-3 my-2">
+    <div className="border border-darkerGray rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300 px-1.5 py-2.5 sm:p-3 my-2">
       <div className='flex justify-between items-center'>
         <div className='flex items-center gap-2 pb-3'>
           <div className="w-6 h-6 rounded-full overflow-hidden">
@@ -32,23 +33,21 @@ const NFTCollectionCard: React.FC<NFTCollectionCardProps> = ({ data }) => {
               className="w-full h-full object-cover"
             />
           </div>
-          <span className="text-gray-400">{data.creator}</span>
+          <span className="text-gray-400 text-xs sm:text-base">{data.creator}</span>
           {data.isVerified && (
-            <Image src={'/verified.png'} alt='verified_icon' width={20} height={20} />
+            <Image src={'/verified.png'} alt='verified_icon' width={20} height={20} className='w-4 h-4 sm:w-5 sm:h-5' />
           )}
         </div>
         {/* Like button overlay */}
-        <div className="flex w-fit bg-black/50 rounded-full p-2 backdrop-blur-sm">
-          <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-          </svg>
-          <span className="text-xs text-white ml-1">{data.likes}</span>
+        <div className="flex w-fit bg-black/50 rounded-full backdrop-blur-sm pb-3">
+         <Heart className='h-4 w-4'/>
+          <span className="hidden md:block text-xs text-white ml-1">{data.likes}</span>
         </div>
       </div>
 
 
       {/* NFT Image */}
-      <div className="relative h-[350px] overflow-hidden">
+      <div className="relative h-[146px] sm:h-[350px] overflow-hidden">
         <Image
           src={data.image}
           alt={data.title}
@@ -58,18 +57,18 @@ const NFTCollectionCard: React.FC<NFTCollectionCardProps> = ({ data }) => {
       </div>
 
       {/* Card Content */}
-      <div className="p-4">
+      <div className=" pt-2">
         {/* NFT Title */}
-        <h3 className="text-white font-semibold text-lg mb-2 truncate">{data.title}</h3>
+        <h3 className="text-white font-semibold text-xs sm:text-lg mb-2 truncate">{data.title}</h3>
 
         {/* Bid Info */}
-        <div className="flex justify-between items-center mb-2">
-          <div>
-            <p className="text-gray-400 text-xs">Current Bid</p>
+        <div className="flex justify-between items-end sm:mb-2">
+          <div className='flex sm:flex-col  text-left justify-between'>
+            <p className="text-gray-400 text-xs mb-1.5">Current Bid</p>
             <p className="text-white font-semibold">{data.currentBid}</p>
           </div>
-          <div className="text-right">
-            <p className="text-gray-400 text-xs">{data.bidCount} bids</p>
+          <div className=" sm:flex-col  text-right justify-between hidden sm:flex">
+            <p className="text-gray-400 text-xs mb-1.5">{data.bidCount} bids</p>
             <p className="text-gray-400 text-xs">{data.timeLeft}</p>
           </div>
         </div>
diff --git a/app/(main)/auction/components/pages/description.tsx b/app/(main)/auction/components/pages/description.tsx
index a042e8c..a18a519 100644
--- a/app/(main)/auction/components/pages/description.tsx
+++ b/app/(main)/auction/components/pages/description.tsx
@@ -57,7 +57,7 @@ const DescriptionPage = () => {
 
     return (
         <div className="">
-            <div className="mb-6 border-b border-gray-700 pb-6 lg:w-1/2">
+            <div className="mb-6 border-b border-gray-700 pb-7 lg:w-1/2">
                 <h3 className="text-white text-lg font-semibold mb-4">About This Asset</h3>
                 <p className="text-lg leading-loose tracking-wider text-gray-400">
                     The pink-blackened horned knight is an embodiment of peace, unity and
@@ -70,7 +70,7 @@ const DescriptionPage = () => {
                 <h3 className="text-white text-lg font-semibold mb-4">About This Collection</h3>
                 <div className="flex items-center gap-3 mb-4">
                     <p className="text-gray-400 text-sm">Collection by</p>
-                    <Image src={'/creator_nft.png'} alt="creatornft" width={50} height={50} />
+                    <Image src={'/creator_nft.png'} alt="creatornft" width={50} height={50} className='w-8 h-8 sm:w-[50px] sm:h-[50px]' />
                     <p className="text-white font-medium">x0023y...yrte</p>
                 </div>
                 <p className="text-lg leading-loose tracking-wider text-gray-400">
diff --git a/app/(main)/auction/page.tsx b/app/(main)/auction/page.tsx
index b966c61..f72d60e 100644
--- a/app/(main)/auction/page.tsx
+++ b/app/(main)/auction/page.tsx
@@ -3,7 +3,7 @@ import NFTCollectionSection from "./components/nft_collection_card_data";
 
 const AuctionPage = () => {
     return (
-        <div className="max-w-[1320px] mx-auto">
+        <div className="max-w-[1320px] mx-auto px-4">
             <NftBid/>
             <NFTCollectionSection />
         </div>