diff --git a/packages/nextjs/app/marketplace/_components/Marketplace.tsx b/packages/nextjs/app/marketplace/_components/Marketplace.tsx
index 2797054..6a819a6 100644
--- a/packages/nextjs/app/marketplace/_components/Marketplace.tsx
+++ b/packages/nextjs/app/marketplace/_components/Marketplace.tsx
@@ -141,10 +141,10 @@ export const Marketplace = () => {
       }
 
       // Debugging: Log the Purchase Events
-      console.log("Purchase Events:", purchaseEvents);
+      // console.log("Purchase Events:", purchaseEvents);
 
       // Debugging: Log the listed collectibles before filtering
-      console.log("Listed Collectibles before filtering:", collectiblesUpdate);
+      // console.log("Listed Collectibles before filtering:", collectiblesUpdate);
 
       // Filter out NFTs that have been purchased
       const updatedCollectibles = collectiblesUpdate.filter(collectible => {
@@ -152,12 +152,12 @@ export const Marketplace = () => {
           const purchaseItemId = Number(purchase.args.itemId); // Convert itemId from Purchase to number
           return purchaseItemId === collectible.listingId; // Ensure both are numbers for comparison
         });
-        console.log(`Collectible ${collectible.listingId} has been purchased:`, hasBeenPurchased);
+        // console.log(`Collectible ${collectible.listingId} has been purchased:`, hasBeenPurchased);
         return !hasBeenPurchased;
       });
 
       // Debugging: Log the filtered collectibles
-      console.log("Filtered Collectibles:", updatedCollectibles);
+      // console.log("Filtered Collectibles:", updatedCollectibles);
 
       // Update state with filtered collectibles
       setListedCollectibles(updatedCollectibles);
@@ -187,7 +187,7 @@ export const Marketplace = () => {
           <div className="text-2xl text-primary-content">No NFTs found</div>
         </div>
       ) : (
-        <div className="flex flex-wrap gap-4 my-8 px-5 justify-center">
+        <div className="flex flex-wrap gap-6 my-4 px-5 justify-center">
           {listedCollectibles.map(item => (
             <NFTCard nft={item} key={item.uri} />
           ))}
diff --git a/packages/nextjs/app/marketplace/_components/NFTCard.tsx b/packages/nextjs/app/marketplace/_components/NFTCard.tsx
index c90bd38..34dc7b2 100644
--- a/packages/nextjs/app/marketplace/_components/NFTCard.tsx
+++ b/packages/nextjs/app/marketplace/_components/NFTCard.tsx
@@ -40,7 +40,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
     watch: true,
   });
 
-  console.log("usdcAllowance", usdcAllowance);
+  // console.log("usdcAllowance", usdcAllowance);
 
   const handleBuyNFT = async () => {
     if (!nft.listingId || !nft.price || !nft.payableCurrency) return; // Skip if required data is missing
@@ -65,7 +65,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
   };
 
   const handleApproveUSDC = async () => {
-    if (!nft.listingId || !nft.price || !nft.payableCurrency) return; // Skip if required data is missing
+    if (!nft.price || !nft.payableCurrency) return; // Skip if required data is missing
 
     try {
       // let value;
@@ -101,21 +101,21 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
       <div className="tabs flex justify-center gap-3">
         {nft.listingId ? (
           <a
-            className={`tab tab-bordered ${activeTab === "buyNFT" ? "bg-red-600" : ""}`}
+            className={`tab ${activeTab === "buyNFT" ? "bg-red-200 dark:bg-red-800" : ""}`}
             onClick={() => setActiveTab("buyNFT")}
           >
             Buy NFT
           </a>
         ) : (
           <a
-            className={`tab tab-bordered ${activeTab === "mintNFT" ? " bg-green-600" : ""}`}
+            className={`tab ${activeTab === "mintNFT" ? "bg-green-200 dark:bg-green-800" : ""}`}
             onClick={() => setActiveTab("mintNFT")}
           >
             Mint NFT
           </a>
         )}
         <a
-          className={`tab tab-bordered ${activeTab === "info" ? "bg-blue-600" : ""}`}
+          className={`tab ${activeTab === "info" ? "bg-blue-200 dark:bg-blue-900" : ""}`}
           onClick={() => setActiveTab("info")}
         >
           Info
@@ -154,7 +154,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
                 {requiresApproval ? (
                   <div className="card-actions justify-end">
                     <button
-                      className="btn btn-warning btn-md px-8 tracking-wide function-button"
+                      className="btn btn-primary btn-md px-8 tracking-wide bg-yellow-200 hover:bg-yellow-300 dark:bg-yellow-800 dark:hover:bg-yellow-700 border-0"
                       onClick={handleApproveUSDC}
                     >
                       Allow USDC
@@ -163,7 +163,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
                 ) : (
                   <div className="card-actions justify-end">
                     <button
-                      className="btn btn-secondary btn-md px-8 tracking-wide function-button"
+                      className="btn btn-primary btn-md px-8 tracking-wide bg-green-200 hover:bg-green-300 dark:bg-green-800 dark:hover:bg-green-700  border-0"
                       onClick={handleBuyNFT}
                     >
                       Mint NFT
@@ -190,13 +190,9 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
 
             {/* Display price and buy button only if price is available */}
             {nft.price && nft.payableCurrency && (
-              <div className="flex flex-row justify-around my-2 space-y-1">
+              <div className="flex flex-row items-center justify-around my-2 space-y-1">
                 <div>
-                  <div className="flex space-x-3 mt-1 items-center">
-                    <span className="font-semibold">Max Supply: </span>
-                    <span>{nft.maxTokenId}</span>
-                  </div>
-                  <div className="flex flex-row items-center gap-2">
+                  <div className="flex flex-row justify-center  gap-2">
                     <span className="text-lg">
                       <b>{formattedPrice}</b> {nft.payableCurrency}
                     </span>
@@ -207,7 +203,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
                 {requiresApproval ? (
                   <div className="card-actions justify-end">
                     <button
-                      className="btn btn-warning btn-md px-8 tracking-wide bg-yellow-600 border-0"
+                      className="btn btn-primary btn-md px-8 tracking-wide bg-yellow-200 hover:bg-yellow-300 dark:bg-yellow-800 dark:hover:bg-yellow-700 border-0"
                       onClick={handleApproveUSDC}
                     >
                       Allow USDC
@@ -216,7 +212,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
                 ) : (
                   <div className="card-actions justify-end">
                     <button
-                      className="btn btn-secondary btn-md px-8 tracking-wide function-button"
+                      className="btn btn-primary btn-md px-8 tracking-wide bg-red-200 hover:bg-red-300 dark:bg-red-800 dark:hover:bg-red-700 border-0"
                       onClick={handleBuyNFT}
                     >
                       Buy NFT
diff --git a/packages/nextjs/app/myProfile/_components/MyHoldings.tsx b/packages/nextjs/app/myProfile/_components/MyHoldings.tsx
index 748c451..ae2b654 100644
--- a/packages/nextjs/app/myProfile/_components/MyHoldings.tsx
+++ b/packages/nextjs/app/myProfile/_components/MyHoldings.tsx
@@ -100,7 +100,7 @@ export const MyHoldings = () => {
           <div className="text-2xl text-primary-content">No NFTs found</div>
         </div>
       ) : (
-        <div className="flex flex-wrap gap-4 my-4 px-5 justify-center">
+        <div className="flex flex-wrap gap-6 my-4 px-5 justify-center">
           {myAllCollectibles.map(item => (
             <NFTCard nft={item} key={item.id} />
           ))}
diff --git a/packages/nextjs/app/myProfile/_components/MyProfile.tsx b/packages/nextjs/app/myProfile/_components/MyProfile.tsx
index 40c454c..a448cdc 100644
--- a/packages/nextjs/app/myProfile/_components/MyProfile.tsx
+++ b/packages/nextjs/app/myProfile/_components/MyProfile.tsx
@@ -123,19 +123,19 @@ export const MyProfile: NextPage = () => {
       <div className="mt-2 bg-base-300 w-full rounded-lg">
         <div className="tabs justify-center">
           <a
-            className={`tab tab-lifted ${activeTab === "your-nfts" ? "bg-blue-500" : ""}`}
+            className={`tab tab-lifted ${activeTab === "your-nfts" ? "bg-blue-200 dark:bg-blue-900" : ""}`}
             onClick={() => setActiveTab("your-nfts")}
           >
             Your NFTs
           </a>
           <a
-            className={`tab tab-lifted ${activeTab === "nfts-on-sale" ? "bg-blue-500" : ""}`}
+            className={`tab tab-lifted ${activeTab === "nfts-on-sale" ? "bg-blue-200 dark:bg-blue-900" : ""}`}
             onClick={() => setActiveTab("nfts-on-sale")}
           >
             NFTs on Sale
           </a>
           <a
-            className={`tab tab-lifted ${activeTab === "past-sales" ? "bg-blue-500" : ""}`}
+            className={`tab tab-lifted ${activeTab === "past-sales" ? "bg-blue-200 dark:bg-blue-900" : ""}`}
             onClick={() => setActiveTab("past-sales")}
           >
             Past Sales
diff --git a/packages/nextjs/app/myProfile/_components/NFTCard.tsx b/packages/nextjs/app/myProfile/_components/NFTCard.tsx
index 2e2ee66..64298b6 100644
--- a/packages/nextjs/app/myProfile/_components/NFTCard.tsx
+++ b/packages/nextjs/app/myProfile/_components/NFTCard.tsx
@@ -91,15 +91,21 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
     <div className="card card-compact bg-base-100  w-[300px] ">
       {/* Tabs navigation */}
       <div className="tabs flex justify-center gap-3">
-        <a className={`tab ${activeTab === "artwork" ? "bg-blue-500" : ""}`} onClick={() => setActiveTab("artwork")}>
+        <a
+          className={`tab ${activeTab === "artwork" ? "bg-blue-300 dark:bg-blue-900" : ""}`}
+          onClick={() => setActiveTab("artwork")}
+        >
           Artwork
         </a>
-        <a className={`tab  ${activeTab === "details" ? "bg-blue-500" : ""}`} onClick={() => setActiveTab("details")}>
+        <a
+          className={`tab  ${activeTab === "details" ? "bg-blue-300 dark:bg-blue-900" : ""}`}
+          onClick={() => setActiveTab("details")}
+        >
           Details
         </a>
         {connectedAddress === nft.owner && (
           <a
-            className={`tab  ${activeTab === "sellNFT" ? "tab-active border-0" : ""}`}
+            className={`tab  ${activeTab === "sellNFT" ? "bg-red-300 dark:bg-red-800" : ""}`}
             onClick={() => setActiveTab("sellNFT")}
           >
             Sell NFT
@@ -158,7 +164,10 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
               />
             </div>
             <div className="card-actions justify-end">
-              <button className="btn btn-secondary btn-md px-8 tracking-wide function-button" onClick={handleTransfer}>
+              <button
+                className="btn btn-secondary btn-md px-8 tracking-wide bg-blue-300 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 border-0"
+                onClick={handleTransfer}
+              >
                 Transfer
               </button>
             </div>
@@ -171,7 +180,6 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
         <div className="card-body">
           {/* Payable Currency Toggle */}
           <div className="form-control">
-            <p className="text-lg font-semibold">List NFT for sale</p>
             <span className="label-text font-semibold">Currency</span>
             <label className="label cursor-pointer items-center flex flex-row">
               <span>{payableCurrency === "0" ? "ETH" : "USDC"}</span>
@@ -261,14 +269,14 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
           <div className="card-actions justify-end">
             {marketplaceData && isApproved && isApproved.toLowerCase() == marketplaceData.address ? (
               <button
-                className="btn btn-primary btn-md px-8 tracking-wide function-button"
+                className="btn btn-primary btn-md px-8 tracking-wide bg-red-300 hover:bg-red-200 dark:bg-red-800 dark:hover:bg-red-700 border-0"
                 onClick={handleCreateListing}
               >
-                Create Listing
+                List NFT for sale
               </button>
             ) : (
               <button
-                className="btn btn-primary bg btn-md px-8 tracking-wide bg-yellow-600 border-0"
+                className="btn btn-primary btn-md px-8 tracking-wide bg-yellow-200 hover:bg-yellow-300 dark:bg-yellow-800 dark:hover:bg-yellow-700 border-0"
                 onClick={handleApprove}
               >
                 Approve this NFT
diff --git a/packages/nextjs/app/simpleMint/_components/SimpleMint.tsx b/packages/nextjs/app/simpleMint/_components/SimpleMint.tsx
index 3bd5ba3..c57b4a2 100644
--- a/packages/nextjs/app/simpleMint/_components/SimpleMint.tsx
+++ b/packages/nextjs/app/simpleMint/_components/SimpleMint.tsx
@@ -413,25 +413,7 @@ export const SimpleMint: NextPage = () => {
             </div>
           </div>
 
-          <div className="flex justify-center items-center mt-6 gap-3">
-            {isGaslessMinting ? (
-              <button
-                className={`btn btn-primary hover:bg-yellow-500 py-3 px-6 bg-yellow-600 ${loading ? "loading" : ""}`}
-                disabled={loading}
-                onClick={handleSimpleMint}
-              >
-                Propose NFT collection
-              </button>
-            ) : (
-              <button
-                className={`btn btn-primary hover:bg-green-500 py-3 px-6 bg-green-600 ${loading ? "loading" : ""}`}
-                disabled={loading}
-                onClick={handleMPaidMint}
-              >
-                Start NFT collection
-              </button>
-            )}
-
+          <div className="flex flex-col justify-center items-center mt-6 gap-3">
             {/* Toggle Button for Gasless Mint */}
             <label className="flex items-center cursor-pointer">
               <input
@@ -447,6 +429,28 @@ export const SimpleMint: NextPage = () => {
                 {isGaslessMinting ? "Gasless Minting" : "Paid Minting"}
               </span>
             </label>
+
+            {isGaslessMinting ? (
+              <button
+                className={`btn btn-primary hover:bg-yellow-500 py-3 px-6 bg-yellow-200 dark:bg-yellow-800 border-0 ${
+                  loading ? "loading" : ""
+                }`}
+                disabled={loading}
+                onClick={handleSimpleMint}
+              >
+                Propose NFT collection
+              </button>
+            ) : (
+              <button
+                className={`btn btn-primary py-3 px-6 bg-green-200 dark:bg-green-800 hover:bg-green-500 border-0 ${
+                  loading ? "loading" : ""
+                }`}
+                disabled={loading}
+                onClick={handleMPaidMint}
+              >
+                Start NFT collection
+              </button>
+            )}
           </div>
 
           {uploadedIpfsPath && (