diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index f3cdcea..7aafaa2 100644
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -15,7 +15,7 @@ export default function HomeLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className={`${futsat.className} flex flex-col min-h-screen overflow-x-hidden`}>
+    <div className={`${futsat.className} flex flex-col min-h-screen`}>
       <Navbar />
       <MobileNavbar />
       <main className="flex-grow">{children}</main>
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index e51bd77..7f81236 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -1,22 +1,20 @@
 import Hero from "@/components/landing-page/Hero";
-import TrendingCollections from '@/components/landing-page/trending-collections';
-import TrendingNft from '@/components/landing-page/trending-nft'
-import YouMayAlsoLike from '@/components/landing-page/you-may-also-like'
-import Newsletter from '@/components/newsletter';
-import LiveAuction from '@/components/landing-page/live-auction'
-
-
+import TrendingCollections from "@/components/landing-page/trending-collections";
+import TrendingNft from "@/components/landing-page/trending-nft";
+import YouMayAlsoLike from "@/components/landing-page/you-may-also-like";
+import Newsletter from "@/components/newsletter";
+import LiveAuction from "@/components/landing-page/live-auction";
 
 export default function Home() {
   return (
     <div className="min-h-screen">
-      <main className=" flex flex-col gap-20 px-4 sm">
+      <main className=" flex flex-col gap-20 px-0 sm:px-4 sm">
         <Hero />
-        <TrendingNft/>
-        <TrendingCollections/>
-        <LiveAuction/>
-        <YouMayAlsoLike/>
-        <Newsletter/>
+        <TrendingNft />
+        <TrendingCollections />
+        <LiveAuction />
+        <YouMayAlsoLike />
+        <Newsletter />
       </main>
     </div>
   );
diff --git a/components/landing-page/Footer.tsx b/components/landing-page/Footer.tsx
index dd67518..7ab583b 100644
--- a/components/landing-page/Footer.tsx
+++ b/components/landing-page/Footer.tsx
@@ -5,7 +5,7 @@ import * as z from "zod";
 import Link from "next/link";
 import Image from "next/image";
 import { motion } from "framer-motion";
-import { links, socialLinks } from "@/constants/footer";
+import { links, socialLinks, mobileLinks } from "@/constants/footer";
 
 const formSchema = z.object({
   email: z.string().email("Please enter a valid email address"),
@@ -28,6 +28,12 @@ export default function Footer() {
 
   const getLinks = (category: keyof typeof links) => links[category] || [];
   const linkKeys = Object.keys(links) as (keyof typeof links)[];
+
+  const getMobileLinks = (category: keyof typeof mobileLinks) =>
+    mobileLinks[category] || [];
+  const mobileLinkKeys = Object.keys(
+    mobileLinks
+  ) as (keyof typeof mobileLinks)[];
   const currentYear = new Date().getFullYear();
 
   const containerVariants = {
@@ -49,9 +55,9 @@ export default function Footer() {
   };
 
   return (
-    <footer className="w-full h-fit text-white bg-black">
+    <footer className="w-full min-h-[1400px] sm:min-h-fit text-white bg-black">
       <motion.div
-        className="w-full px-4 md:px-0 py-8 lg:py-10 container mx-auto"
+        className="w-full px-4 py-12 md:px-8 container mx-auto"
         initial="hidden"
         animate="visible"
         variants={containerVariants}
@@ -68,12 +74,12 @@ export default function Footer() {
               className="w-28 h-auto"
               alt="StarkBid logo"
             />
-            <p className="text-white/90 font-semibold text-xs md:text-base mb-2.5">
+            <p className="text-white/90 font-semibold text-[16px] md:text-base mb-2.5">
               Powering the Future of Digital Auctions on Starknet.
             </p>
             <form
               onSubmit={handleSubmit(onSubmit)}
-              className="w-full flex gap-2.5"
+              className="w-full flex flex-col gap-[10px] sm:flex-row"
             >
               <div className="flex-grow">
                 <input
@@ -100,7 +106,7 @@ export default function Footer() {
               <h3 className="text-white/90 font-bold text-base md:text-xl mb-4">
                 Join The Community
               </h3>
-              <div className="flex gap-4">
+              <div className="flex justify-between sm:justify-normal sm:gap-4">
                 {socialLinks.map((social) => (
                   <Link
                     key={social.name}
@@ -122,7 +128,7 @@ export default function Footer() {
             </div>
           </motion.div>
 
-          <div className="grid grid-cols-3 md:grid-cols-3 gap-x-3 md:gap-x-5 gap-y-10 xl:gap-x-12">
+          <div className="hidden sm:grid sm:grid-cols-3 gap-x-3 sm:gap-x-5 gap-y-10 xl:gap-x-12">
             {linkKeys.map((category) => (
               <motion.div
                 key={category}
@@ -146,28 +152,55 @@ export default function Footer() {
               </motion.div>
             ))}
           </div>
+
+          {/*Mobile view */}
+
+          <div className="flex justify-around items-center gap-[100px] sm:hidden">
+            {mobileLinkKeys.map((category) => (
+              <motion.div
+                key={category}
+                className="space-y-4"
+                variants={itemVariants}
+              >
+                <h3 className="text-white/90 font-bold text-base md:text-xl">
+                  {category}
+                </h3>
+                <nav className="flex flex-col gap-y-[20px] text-sm">
+                  {getMobileLinks(category).map((item) => (
+                    <Link
+                      key={item}
+                      href={`/${item.toLowerCase().replace(/\s+/g, "-")}`}
+                      className="text-white/60 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-[#7C3AED] rounded"
+                    >
+                      {item}
+                    </Link>
+                  ))}
+                </nav>
+              </motion.div>
+            ))}
+          </div>
         </div>
 
         <motion.div
           className="mt-10 pt-[30px] border-t-[0.4px] border-white/60"
           variants={itemVariants}
         >
-          <div className="flex flex-col-reverse lg:flex-row justify-center items-center gap-4">
-            <p className="text-center md:text-left text-white/90 text-sm">
-              Copyright © {currentYear} StrakBid. All rights reserved
+          <div className="flex flex-col justify-start items-start lg:flex-row sm:justify-center sm:items-center gap-5">
+            <p className="text-center md:text-left sm:text-white/90 text-sm text-[#8E9BAE]">
+              Copyright © {currentYear} StarkBid. All rights reserved
             </p>
-            <div className="flex flex-col md:flex-row items-center gap-4 md:gap-6">
-              <div className="flex gap-x-2 md:gap-x-6">
+            <div className="flex flex-col justify-start items-start md:flex-row sm:items-center gap-5 md:gap-6">
+              <div className="flex flex-col gap-5 sm:flex-row sm:gap-x-2 md:gap-x-6">
                 {" "}
                 <Link
                   href="/terms-condition"
-                  className="text-white/90 text-sm hover:text-white transition-colors"
+                  className="text-[#8E9BAE] sm:text-white/90 text-sm hover:text-white transition-colors"
                 >
                   Terms & Condition
                 </Link>
                 <Link
                   href="/privacy-policy"
-                  className="text-white/90 text-sm hover:text-white transition-colors"
+                  className="text-[#8E9BAE] sm:text-white/90 text-sm hover:text-white transition-colors"
                 >
                   Privacy Policy
                 </Link>
@@ -175,7 +208,7 @@ export default function Footer() {
 
               <a
                 href="mailto:support@starkbid.com"
-                className="text-white/90 text-sm hover:text-white transition-colors "
+                className="text-[#8E9BAE] sm:text-white/90 text-sm hover:text-white transition-colors "
               >
                 support@starkbid.com
               </a>
diff --git a/components/landing-page/Hero.tsx b/components/landing-page/Hero.tsx
index ea50c04..3f3d1e4 100644
--- a/components/landing-page/Hero.tsx
+++ b/components/landing-page/Hero.tsx
@@ -68,22 +68,23 @@ const Hero = () => {
   // //   }
   // // };
 
-  const goToSlide = useCallback((index: React.SetStateAction<number>) => {
-    if (isTransitioning) return;
+  const goToSlide = useCallback(
+    (index: React.SetStateAction<number>) => {
+      if (isTransitioning) return;
 
-    setIsTransitioning(true);
-    setActiveIndex(index);
+      setIsTransitioning(true);
+      setActiveIndex(index);
 
-    setTimeout(() => {
-      setIsTransitioning(false);
-    }, 500);
-  }, [isTransitioning]
-  )
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, 500);
+    },
+    [isTransitioning]
+  );
   const nextSlide = useCallback(() => {
     const newIndex = (activeIndex + 1) % nftItems.length;
     goToSlide(newIndex);
-  }, [activeIndex, goToSlide]
-  )
+  }, [activeIndex, goToSlide]);
   const prevSlide = () => {
     const newIndex = (activeIndex - 1 + nftItems.length) % nftItems.length;
     goToSlide(newIndex);
@@ -106,23 +107,23 @@ const Hero = () => {
 
   return (
     <div
-      className="mt-4 pb-6 sm:mt-6 md:mt-[22px] relative overflow-hidden rounded-xl w-full max-w-[1320px] mx-auto"
+      className="pb-6 sm:mt-6 md:mt-[22px] relative sm:overflow-hidden sm:rounded-xl w-full max-w-[1320px] mx-auto"
       style={{ height: "clamp(400px, 50vw, 525px)" }}
     >
       <div
         className="relative w-full h-full"
         ref={carouselRef}
-      // onTouchStart={handleTouchStart}
-      // onTouchMove={handleTouchMove}
-      // onTouchEnd={handleTouchEnd}
-      // onMouseDown={handleMouseDown}
-      // onMouseMove={handleMouseMove}
-      // onMouseUp={handleMouseUp}
-      // onMouseLeave={handleMouseLeave}
+        // onTouchStart={handleTouchStart}
+        // onTouchMove={handleTouchMove}
+        // onTouchEnd={handleTouchEnd}
+        // onMouseDown={handleMouseDown}
+        // onMouseMove={handleMouseMove}
+        // onMouseUp={handleMouseUp}
+        // onMouseLeave={handleMouseLeave}
       >
         {/* Slides */}
         <div
-          className="flex transition-transform duration-500 ease-in-out h-full"
+          className="hidden sm:flex sm:flex-row transition-transform duration-500 ease-in-out h-full"
           style={{ transform: `translateX(-${activeIndex * 100}%)` }}
         >
           {nftItems.map((nft, index) => (
@@ -220,6 +221,103 @@ const Hero = () => {
           ))}
         </div>
 
+        {/*Mobile view */}
+
+        <div
+          className="flex transition-transform duration-500 sm:hidden ease-in-out h-full"
+          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
+        >
+          {nftItems.map((nft, index) => (
+            <div
+              key={nft.id}
+              className="flex-shrink-0 w-full h-[600px] relative text-white"
+              style={{
+                backgroundImage: `url(/svgs/hero-bg.svg)`,
+                backgroundSize: "150%",
+                backgroundPositionX: "40%",
+                backgroundPositionY: "30%",
+                backgroundRepeat: "no-repeat",
+              }}
+            >
+              {/* Gradient overlay - positioned on top of the image */}
+              <div
+                className="absolute top-0 right-0 bottom-0 left-0 z-10 pointer-events-none"
+                style={{
+                  background:
+                    "linear-gradient(180deg, rgba(16, 18, 19, 0) 0%, #101213 63.59%)",
+                }}
+              ></div>
+
+              {/* Content overlay */}
+              <div className="absolute inset-0 w-full z-20 flex flex-col justify-start px-4 pt-56 pb-20">
+                <div className="flex flex-col gap-[20px]">
+                  <div className="flex flex-col gap-[10px]">
+                    <div>
+                      <div className="font-bold text-[30px]">{nft.title}</div>
+                      <div className="flex justify-between">
+                        <div className="flex flex-col gap-[4px]">
+                          <div className="text-[14px] font-semibold">
+                            Creator
+                          </div>
+                          <div className="flex items-center gap-[2px]">
+                            <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-purple-600 mr-2 flex items-center justify-center text-xs text-white">
+                              {nft.creator?.charAt(0) || "A"}
+                            </div>
+                            <div className="text-[14px] font-semibold">
+                              {nft.creator || "Anonymous"}
+                            </div>
+                            {nft.verified && (
+                              <div className="ml-1 w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs">
+                                ✓
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                        <div>
+                          <button
+                            onClick={() => toggleIsLiked(index)}
+                            className="text-gray-400"
+                          >
+                            {isLiked[index] ? (
+                              <BsHeartFill className="text-ash" size={20} />
+                            ) : (
+                              <BsHeart size={20} />
+                            )}
+                          </button>
+                        </div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <div className="text-[14px] font-semibold">
+                          Current bid
+                        </div>
+                        <div className="text-[16px] font-bold">
+                          {nft.currentBid}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="text-[16px] font-medium">
+                      {nft.description}
+                    </div>
+                    <div className="text-[14px] font-semibold flex gap-[10px]">
+                      <div>{nft.minted}</div>
+                      <div>|</div>
+                      <div>{nft.timeLeft}</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-[10px]">
+                    <button className="bg-[#8C62F2] text-white font-bold py-[10px] px-[22px] rounded-[10px] w-full">
+                      Place a bid
+                    </button>
+                    <button className="bg-white text-black font-bold py-[10px] px-[22px] rounded-[10px] w-full">
+                      Mint for free
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
         {/* Navigation arrows */}
         <button
           className="absolute left-1 sm:left-2 top-1/2 transform -translate-y-1/2 w-8 h-8 sm:w-10 sm:h-10 bg-black/80 rounded-full flex items-center justify-center text-white z-30 hover:bg-black/70 transition-colors"
@@ -237,15 +335,16 @@ const Hero = () => {
         </button>
 
         {/* Indicator dots */}
-        <div className="absolute sm:-bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2 sm:space-x-3 z-[1000]">
+        <div className="absolute sm:-bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2 sm:space-x-3 z-[1000] pt-60">
           {nftItems.map((_, index) => (
             <button
               key={index}
               onClick={() => goToSlide(index)}
-              className={`h-1 rounded-full transition-all duration-300 ${index === activeIndex
-                ? "w-20 sm:w-20 bg-white"
-                : "w-20 bg-gray-600"
-                }`}
+              className={`h-1 rounded-full transition-all duration-300 ${
+                index === activeIndex
+                  ? "w-20 sm:w-20 bg-white"
+                  : "w-20 bg-gray-600"
+              }`}
             />
           ))}
         </div>
diff --git a/components/landing-page/live-auction.tsx b/components/landing-page/live-auction.tsx
index a622617..6169075 100644
--- a/components/landing-page/live-auction.tsx
+++ b/components/landing-page/live-auction.tsx
@@ -7,7 +7,6 @@ const LiveAuction = () => {
   return (
     <section className="bg-black text-white py-20">
       <div className="container mx-auto flex flex-col md:flex-row gap-16 px-4">
-        
         {/* LEFT SIDE */}
         <div className="flex-1 flex flex-col justify-start gap-10">
           <div className="flex flex-col gap-4">
@@ -15,7 +14,8 @@ const LiveAuction = () => {
               <span className="text-green">● </span> Live Auctions
             </h2>
             <p className="text-lg text-gray-300 max-w-md">
-              Participate in real-time bidding wars on the most sought-after NFTs.
+              Participate in real-time bidding wars on the most sought-after
+              NFTs.
             </p>
           </div>
 
@@ -66,7 +66,6 @@ const LiveAuction = () => {
 
             {/* Overlay Content */}
             <div className="absolute inset-0 flex flex-col justify-between p-4">
-
               {/* Top Info (currently empty) */}
               <div className="flex justify-between items-start">
                 {/* (Add anything if needed later) */}
@@ -74,7 +73,6 @@ const LiveAuction = () => {
 
               {/* Bottom Info */}
               <div className="flex flex-col gap-4">
-
                 {/* User Info and Live Bid */}
                 <div className="flex justify-between items-center">
                   <div className="flex items-center gap-2">
@@ -119,7 +117,9 @@ const LiveAuction = () => {
                       className="flex flex-col items-center justify-center bg-light_grey p-4 rounded-md min-w-[60px]"
                     >
                       <span className="text-xl font-bold">{item.value}</span>
-                      <span className="text-[10px] uppercase">{item.label}</span>
+                      <span className="text-[10px] uppercase">
+                        {item.label}
+                      </span>
                     </div>
                   ))}
                 </div>
@@ -127,9 +127,12 @@ const LiveAuction = () => {
                 {/* Title and Place Bid Button */}
                 <div className="flex justify-between items-center p-4 rounded-lg">
                   <div>
-                    <h1 className="text-xl font-bold mb-1">Muittude #Facetag</h1>
+                    <h1 className="text-xl font-bold mb-1">
+                      Muittude #Facetag
+                    </h1>
                     <p className="text-gray-300 text-base">
-                      This information would contain a short description of the displayed NFT.
+                      This information would contain a short description of the
+                      displayed NFT.
                     </p>
                   </div>
 
@@ -137,13 +140,10 @@ const LiveAuction = () => {
                     Place a Bid
                   </button>
                 </div>
-
               </div>
             </div>
-
           </div>
         </div>
-
       </div>
     </section>
   );
diff --git a/components/landing-page/trending-collections.tsx b/components/landing-page/trending-collections.tsx
index bb5af2d..ae30868 100644
--- a/components/landing-page/trending-collections.tsx
+++ b/components/landing-page/trending-collections.tsx
@@ -45,7 +45,7 @@ const BlockchainDropdown: React.FC<{
   return (
     <div className="relative h-full">
       <button
-        className="flex items-center h-full bg-[#272729] px-4 py-2 rounded-lg"
+        className="flex items-center justify-center h-full w-full bg-[#272729] px-6 py-3 sm:px-4 sm:py-2 rounded-lg"
         onClick={() => setIsOpen(!isOpen)}
       >
         {blockchain}
@@ -84,8 +84,8 @@ const CollectionTableRow: React.FC<(typeof trendingCollections)[0]> = ({
   rate,
 }) => (
   <tr className="hover:bg-zinc-900 transition-colors duration-300">
-    <td className="px-4 py-4 text-[#8E9BAE]">{id}</td>
-    <td className="px-4 py-4">
+    <td className="px-[8.6px] sm:px-4 py-4 text-[#8E9BAE]">{id}</td>
+    <td className="px-[8.6px] sm:px-4 py-4">
       <div className="group flex items-center ">
         <div className="relative mr-3 shrink-0">
           <Image
@@ -106,25 +106,27 @@ const CollectionTableRow: React.FC<(typeof trendingCollections)[0]> = ({
           </div>
         </div>
         <Link
-          href={`/collections/${encodeURIComponent(name.replace(/\s+/g, "-").toLowerCase())}`}
+          href={`/collections/${encodeURIComponent(
+            name.replace(/\s+/g, "-").toLowerCase()
+          )}`}
           className="whitespace-nowrap group-hover:underline group-hover:cursor-pointer"
         >
           {name}
         </Link>
       </div>
     </td>
-    <td className="px-4 py-4 whitespace-nowrap">{floorPrice}</td>
-    <td className="px-4 py-4 whitespace-nowrap">{volume}</td>
-    <td className="px-4 py-4 whitespace-nowrap">{topOffer}</td>
+    <td className="px-[8.6px] sm:px-4 py-4 whitespace-nowrap">{floorPrice}</td>
+    <td className="px-[8.6px] sm:px-4 py-4 whitespace-nowrap">{volume}</td>
+    <td className="px-[8.6px] sm:px-4 py-4 whitespace-nowrap">{topOffer}</td>
     <td
-      className={`px-4 py-4 whitespace-nowrap ${
+      className={`px-[8.6px] sm:px-4 py-4 whitespace-nowrap ${
         change.startsWith("+") ? "text-green-500" : "text-red-500"
       }`}
     >
       {change}
     </td>
-    <td className="px-4 py-4 whitespace-nowrap">{sales}</td>
-    <td className="px-4 py-4 w-fit">
+    <td className="px-[8.6px] sm:px-4 py-4 whitespace-nowrap">{sales}</td>
+    <td className="px-[8.6px] sm:px-4 py-4 w-fit">
       <div className="flex flex-col w-fit">
         <span>{holder}%</span>
         <span className="text-[#A3A3A3] text-sm">{rate}</span>
@@ -158,7 +160,7 @@ const TrendingCollections: React.FC = () => {
         </div>
 
         {/* Header and Filters */}
-        <div className="flex flex-col md:flex-row justify-between mb-8 gap-4">
+        <div className="hidden sm:flex sm:flex-row justify-between items-center mb-8 gap-4">
           <h2 className="text-2xl font-bold">Trending Collections</h2>
           <div className="flex gap-3 items-center h-12 flex-wrap">
             <TimeframeSelector
@@ -174,7 +176,7 @@ const TrendingCollections: React.FC = () => {
         </div>
 
         <div className="overflow-x-auto">
-          <table className="w-full text-sm min-w-[1200px] xl:min-w-0">
+          <table className="w-full text-sm min-w-[900px] sm:min-w-[1200px] xl:min-w-0">
             <thead className="border-b-[0.3px] border-zinc-500 text-white/60 text-left uppercase">
               <tr>
                 {[
@@ -187,7 +189,10 @@ const TrendingCollections: React.FC = () => {
                   "Sales",
                   "Holders",
                 ].map((header) => (
-                  <th key={header} className="font-light py-5 px-4">
+                  <th
+                    key={header}
+                    className="font-light py-5 px-[8.6px] sm:px-4"
+                  >
                     {header}
                   </th>
                 ))}
diff --git a/components/landing-page/trending-nft.tsx b/components/landing-page/trending-nft.tsx
index 44415a9..ed3c2b1 100644
--- a/components/landing-page/trending-nft.tsx
+++ b/components/landing-page/trending-nft.tsx
@@ -1,11 +1,11 @@
-'use client'
-import React, { useState } from 'react';
-import Image from 'next/image';
-import { BsHeart, BsHeartFill } from 'react-icons/bs';
-import { MdVerified } from 'react-icons/md';
-import Arrow from '@/public/arrow.png'
-import { NFTCardProps, nftData } from '@/constants/data';
-import Link from 'next/link';
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import { BsHeart, BsHeartFill } from "react-icons/bs";
+import { MdVerified } from "react-icons/md";
+import Arrow from "@/public/arrow.png";
+import { NFTCardProps, nftData } from "@/constants/data";
+import Link from "next/link";
 
 const NFTCard: React.FC<NFTCardProps> = ({
   title,
@@ -23,32 +23,46 @@ const NFTCard: React.FC<NFTCardProps> = ({
 
   return (
     <div
-      className="flex flex-col rounded-lg overflow-hidden w-full border border-[#292929] transition-colors duration-300 hover:bg-[#292929]"
+      className="flex flex-col rounded-lg overflow-hidden h-full w-full border border-[#292929] transition-colors duration-300 hover:bg-[#292929]"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className="flex justify-between items-center p-3">
-        <Link href={'/profile'} className="group flex items-center gap-2">
-          <Image
-            src={`/${creatorIcon}`}
-            alt={creatorName}
-            width={28}
-            height={28}
-            className="rounded-full"
-          />
-          <span className="text-white font-medium group-hover:underline">{creatorName}</span>
-          {isVerified && <MdVerified className="text-purple" size={16} />}
+      <div className="flex justify-between items-center py-[5.26px] px-[4.21px] sm:p-3">
+        <Link
+          href={"/profile"}
+          className="group flex items-center gap-[5.17px] sm:gap-2"
+        >
+          <div className="w-[15.77px] h-[15.77px] sm:w-[28px] sm:h-[28px]">
+            <Image
+              src={`/${creatorIcon}`}
+              alt={creatorName}
+              width={28}
+              height={28}
+              className="rounded-full w-full h-full object-cover"
+            />
+          </div>
+
+          <span className="text-white text-[10px] sm:text-[16px] font-semibold group-hover:underline">
+            {creatorName}
+          </span>
+          {isVerified && (
+            <MdVerified className="text-purple w-[10px] h-[10px] sm:w-[16px] sm:h-[16px]" />
+          )}
         </Link>
         <button
           onClick={() => setIsLiked(!isLiked)}
           className="text-ash hover:text-red-500 transition-colors"
         >
-          {isLiked ? <BsHeartFill className="text-ash" size={20} /> : <BsHeart size={20} />}
+          {isLiked ? (
+            <BsHeartFill className="text-ash w-[10px] h-[10px] sm:w-[20px] sm:h-[20px]" />
+          ) : (
+            <BsHeart className="w-[10px] h-[10px] sm:w-[20px] sm:h-[20px]" />
+          )}
         </button>
       </div>
 
       <div
-        className="relative w-full h-64 overflow-hidden"
+        className="relative w-full h-[150px] sm:h-64 overflow-hidden"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
@@ -56,16 +70,21 @@ const NFTCard: React.FC<NFTCardProps> = ({
           src={`/${image}`}
           alt={title}
           fill
-          className={`px-4 transition-all duration-300 ease-in-out ${isHovered ? 'scale-[1.03] ' : ''}`}
+          className={`px-[4.21px] sm:px-4 transition-all duration-300 ease-in-out ${
+            isHovered ? "scale-[1.03] " : ""
+          }`}
         />
         {isHovered && (
-          <Link href={'/auction'} className="absolute bottom-20 left-1/2 transform -translate-x-1/2 border border-soft_grey bg-white text-black px-4 py-2 rounded-md text-sm font-medium z-10 transition-all duration-300 opacity-100 shadow-md hover:bg-gray-100">
+          <Link
+            href={"/auction"}
+            className="absolute bottom-20 left-1/2 transform -translate-x-1/2 border border-soft_grey bg-white text-black px-4 py-2 rounded-md text-sm font-medium z-10 transition-all duration-300 opacity-100 shadow-md hover:bg-gray-100"
+          >
             Place a Bid
           </Link>
         )}
       </div>
 
-      <div className="p-4">
+      <div className="hidden sm:p-4 sm:block">
         <h3 className="text-white font-bold text-lg mb-1">{title}</h3>
 
         <div className="text-ash text-sm mb-3">Current Bid</div>
@@ -79,45 +98,72 @@ const NFTCard: React.FC<NFTCardProps> = ({
           <div>{timeLeft} left</div>
         </div>
       </div>
+
+      {/* Mobile content */}
+      <div className="px-[10px] py-[5.26px] flex flex-col gap-[10px] w-fill sm:hidden">
+        <div className="font-bold text-[10px] text-white">{title}</div>
+        <div className="flex justify-between items-center">
+          <div className="font-semibold text-[10px] text-[#8E9BAE]">
+            Current Bid
+          </div>
+          <div className="font-bold text-[12px] text-white">
+            {currentBid} ETH
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
 
 const TrendingNFTs: React.FC = () => {
-  const [activeTab, setActiveTab] = useState('trending');
+  const [activeTab, setActiveTab] = useState("trending");
 
   return (
-    <div className="bg-black text-white p-6 max-w-[1419] mx-auto ">
-      <div className="flex gap-[1em] mb-8">
+    <div className="bg-black text-white p-6 max-w-[1419] mx-auto pt-64 sm:pt-0">
+      <div className="flex gap-[1em] mb-4 sm:mb-8">
         <button
-          className={`px-2 py-1 ${activeTab === 'trending' ? 'text-white font-bold  text-xl bg-[#1C1D1F] px-4 py-2 rounded-md' : 'text-gray-500  text-xl'}`}
-          onClick={() => setActiveTab('trending')}
+          className={`px-2 py-1 text-[16px] font-semibold sm:font-bold sm:text-xl ${
+            activeTab === "trending"
+              ? "text-white bg-[#1C1D1F] px-4 py-2 rounded-md"
+              : "text-gray-500 "
+          }`}
+          onClick={() => setActiveTab("trending")}
         >
           Trending
         </button>
         <button
-          className={`px-2 py-1 ${activeTab === 'top' ? 'text-white font-bold bg-deepGray px-4 py-2 rounded-md  text-xl' : 'text-gray-500 font-bold  text-xl'}`}
-          onClick={() => setActiveTab('top')}
+          className={`px-2 py-1 text-[16px] font-semibold sm:font-bold sm:text-xl ${
+            activeTab === "top"
+              ? "text-white bg-deepGray px-4 py-2 rounded-md"
+              : "text-gray-500"
+          }`}
+          onClick={() => setActiveTab("top")}
         >
           Top
         </button>
       </div>
 
-      <h2 className="text-3xl font-bold mb-6">Trending NFTs</h2>
+      <div className="flex gap-[10px] items-center mb-6">
+        <h2 className="text-[16px] font-semibold sm:text-3xl sm:font-bold">
+          Trending NFTs
+        </h2>
+        <p className="text-[#8E9BAE] text-[14px] sm:text-[16px] font-semibold">
+          1540 items
+        </p>
+      </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-2 gap-[11.56px] sm:grid-cols-2 lg:grid-cols-4 sm:gap-6">
         {nftData.map((nft) => (
           <NFTCard key={nft.id} {...nft} />
         ))}
       </div>
       <div className="flex justify-center mt-10">
-        <Link href="/nfts"
-        className="bg-deepGray hover:bg-zinc-700 text-white font-medium py-3 px-6 rounded-lg flex items-center gap-2 transition-colors">
+        <Link
+          href="/nfts"
+          className="bg-deepGray hover:bg-zinc-700 text-white font-medium py-3 px-6 rounded-lg flex items-center gap-[10px] transition-colors"
+        >
           View all NFTs
-          <Image
-            src={Arrow}
-            alt='arrow icon'
-          />
+          <Image src={Arrow} alt="arrow icon" />
         </Link>
       </div>
     </div>
diff --git a/components/landing-page/you-may-also-like.tsx b/components/landing-page/you-may-also-like.tsx
index 8033cde..748e1d2 100644
--- a/components/landing-page/you-may-also-like.tsx
+++ b/components/landing-page/you-may-also-like.tsx
@@ -1,13 +1,17 @@
-'use client'
-import React, { useState } from 'react';
-import Image from 'next/image';
-import { ArticleProps, articleData } from '@/constants/data';
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import { ArticleProps, articleData } from "@/constants/data";
 
-const ArticleCard: React.FC<ArticleProps> = ({ title, description, imageUrl }) => {
+const ArticleCard: React.FC<ArticleProps> = ({
+  title,
+  description,
+  imageUrl,
+}) => {
   const [isHovered, setIsHovered] = useState(false);
 
   return (
-    <div 
+    <div
       className="w-full h-full overflow-hidden rounded-xl bg-black border border-[#292929] flex flex-col transition-colors duration-300 hover:bg-[#292929]"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -19,7 +23,9 @@ const ArticleCard: React.FC<ArticleProps> = ({ title, description, imageUrl }) =
               src={`/${imageUrl}`}
               alt={title}
               fill
-              className={`object-cover transition-all duration-300 ease-in-out ${isHovered ? 'scale-[1.03]' : ''}`}
+              className={`object-cover transition-all duration-300 ease-in-out ${
+                isHovered ? "scale-[1.03]" : ""
+              }`}
               sizes="(max-width: 900px) 100vw, 33vw"
             />
           </div>
@@ -31,9 +37,9 @@ const ArticleCard: React.FC<ArticleProps> = ({ title, description, imageUrl }) =
           </button>
         )}
       </div>
-      <div className="p-6 flex-grow flex flex-col">
-        <h2 className="text-xl font-bold text-white mb-3">{title}</h2>
-        <p className="text-gray-300 text-sm">{description}</p>
+      <div className="px-[11.09px] pt-4 py-7 sm:p-6 flex-grow flex flex-col gap-[12px]">
+        <h2 className="text-[16px] sm:text-xl font-bold text-white">{title}</h2>
+        <p className="text-gray-300 text-sm font-medium">{description}</p>
       </div>
     </div>
   );
@@ -43,27 +49,68 @@ const MayAlsoLike: React.FC = () => {
   return (
     <div className="w-full bg-black text-white py-8 px-4">
       <div className="max-w-[85.5rem] mx-auto">
-        <div className="flex justify-between items-center mb-6">
-          <div className='w-[46%]'>
-            <h1 className="text-3xl font-bold mb-3">You might be interested by</h1>
+        <div className="hidden sm:flex justify-between items-center mb-6">
+          <div className="w-[46%]">
+            <h1 className="text-3xl font-bold mb-3">
+              You might be interested by
+            </h1>
             <p className="text-gray-300">
-              We&apos;ve written a few articles about StarkBid and how to run your NFTs better. Stay
-              updated with the latest in the world of NFTs, auctions, and blockchain innovations.
+              We&apos;ve written a few articles about StarkBid and how to run
+              your NFTs better. Stay updated with the latest in the world of
+              NFTs, auctions, and blockchain innovations.
             </p>
           </div>
           <button className="bg-[#272729] hover:bg-[#2e2e2f] text-white px-4 py-2 rounded-lg flex items-center">
             View all
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5 ml-2"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
             </svg>
           </button>
         </div>
+
+        {/*Mobile view */}
+
+        <div className="sm:hidden flex flex-col gap-[26px] mb-[26px]">
+          <div className="flex flex-col gap-[15px]">
+            <div className="font-bold text-[30px] leading-[100%] space-y-4">
+              You might be interested by
+            </div>
+            <div className="font-medium text-[16px] leading-[25px] space-y-4">
+              We&apos;ve written a few articles about StarkBid and how to run
+              your NFTs better. Stay updated with the latest in the world of
+              NFTs, auctions, and blockchain innovations.
+            </div>
+          </div>
+          <div>
+            <button className="bg-[#272729] hover:bg-[#2e2e2f] text-white px-4 py-2 rounded-lg flex items-center">
+              View all
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5 ml-2"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-[2em] ">
-          {articleData.map(article => (
-            <ArticleCard
-              key={article.id}
-              {...article}
-            />
+          {articleData.map((article) => (
+            <ArticleCard key={article.id} {...article} />
           ))}
         </div>
       </div>
@@ -71,4 +118,4 @@ const MayAlsoLike: React.FC = () => {
   );
 };
 
-export default MayAlsoLike;
\ No newline at end of file
+export default MayAlsoLike;
diff --git a/components/newsletter.tsx b/components/newsletter.tsx
index f472c8d..63708c8 100644
--- a/components/newsletter.tsx
+++ b/components/newsletter.tsx
@@ -1,76 +1,87 @@
-"use client"
-import React, { useState } from 'react';
-import Image from 'next/image';
-import stars from '../public/star.png';
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import stars from "../public/star.png";
 
 const Newsletter: React.FC = () => {
-    const [email, setEmail] = useState('');
-    const [submitted, setSubmitted] = useState(false);
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        if (email) {
-            setSubmitted(true);
-        }
-    };
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) {
+      setSubmitted(true);
+    }
+  };
 
-    return (
-        <div className="mx-auto container bg-purple bg-cover rounded-[3rem] text-white relative overflow-hidden h-auto md:h-[35vh] flex items-center px-6 sm:px-10 lg:px-[10rem] py-10 mb-4">
-            {/* top star */}
-            <Image
-                src={stars}
-                height={50}
-                width={150}
-                alt='stars'
-                className="absolute top-2 right-2 sm:top-4 sm:right-4 lg:top-6 lg:right-6"
-            />
-            {/* bottom star */}
-            <Image
-                src={stars}
-                height={50}
-                width={150}
-                alt='stars'
-                className="absolute bottom-2 left-2 sm:bottom-4 sm:left-4 lg:bottom-6 lg:left-6"
-            />
-            <div className="mx-auto w-full">
-                <div className="flex flex-col md:flex-row md:items-center justify-between gap-8">
-                    <div className="md:w-1/2 text-center md:text-left">
-                        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">Stay in the loop</h2>
-                        <p className="text-base sm:text-lg opacity-90 mb-6 max-w-full md:max-w-[30rem] mx-auto md:mx-0">
-                            A hauntingly beautiful NFT series where glitchy, transparent
-                            pixels form eerie digital ghosts and lost memories
-                        </p>
-                    </div>
+  return (
+    <div className="px-4 sm:px-14">
+      <div className="mx-auto container bg-purple bg-cover rounded-[10px] sm:rounded-[3rem] text-white relative overflow-hidden h-auto md:h-[35vh] flex items-center px-4 sm:px-10 lg:px-[10rem] py-10 mb-4">
+        {/* top star */}
+        <Image
+          src={stars}
+          height={50}
+          width={150}
+          alt="stars"
+          className="absolute top-2 right-2 sm:top-4 sm:right-4 lg:top-6 lg:right-6"
+        />
+        {/* bottom star */}
+        <Image
+          src={stars}
+          height={50}
+          width={150}
+          alt="stars"
+          className="absolute bottom-2 left-2 sm:bottom-4 sm:left-4 lg:bottom-6 lg:left-6"
+        />
+        <div className="mx-auto w-full">
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-[150px]">
+            <div className="md:w-1/2 text-center md:text-left">
+              <h2 className="text-[40px] sm:text-4xl lg:text-5xl font-bold mb-4">
+                Stay in the loop
+              </h2>
+              <p className="text-base sm:text-lg opacity-90 mb-6 max-w-full md:max-w-[30rem] mx-auto md:mx-0">
+                A hauntingly beautiful NFT series where glitchy, transparent
+                pixels form eerie digital ghosts and lost memories
+              </p>
+            </div>
 
-                    <div className="md:w-1/2">
-                        {!submitted ? (
-                            <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 items-center">
-                                <input
-                                    type="email"
-                                    placeholder="Enter your Email address"
-                                    value={email}
-                                    onChange={(e) => setEmail(e.target.value)}
-                                    required
-                                    className="bg-white text-black bg-opacity-25 backdrop-blur-sm px-6 py-4 placeholder-white placeholder-opacity-70 rounded-lg flex-grow border-none outline-none focus:ring-2 focus:ring-white w-full sm:w-auto"
-                                />
-                                <button
-                                    type="submit"
-                                    className="bg-white text-purple font-semibold px-8 py-4 hover:bg-opacity-90 transition-all rounded-lg duration-200 w-full sm:w-auto"
-                                >
-                                    Subscribe
-                                </button>
-                            </form>
-                        ) : (
-                            <div className="bg-white text-black bg-opacity-25 backdrop-blur-sm px-6 py-8 text-center">
-                                <p className="text-xl font-semibold">Thank you for subscribing!</p>
-                                <p className="mt-2 opacity-90">Stay tuned for updates on our NFT collection.</p>
-                            </div>
-                        )}
-                    </div>
+            <div className="md:w-1/2">
+              {!submitted ? (
+                <form
+                  onSubmit={handleSubmit}
+                  className="flex flex-col sm:flex-row gap-3 items-center"
+                >
+                  <input
+                    type="email"
+                    placeholder="Enter your Email address"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    className="bg-white text-black bg-opacity-25 backdrop-blur-sm px-6 py-4 placeholder-white placeholder-opacity-70 rounded-lg flex-grow border-none outline-none focus:ring-2 focus:ring-white w-full sm:w-auto"
+                  />
+                  <button
+                    type="submit"
+                    className="bg-white text-purple font-semibold px-8 py-4 hover:bg-opacity-90 transition-all rounded-lg duration-200 w-full sm:w-auto"
+                  >
+                    Subscribe
+                  </button>
+                </form>
+              ) : (
+                <div className="bg-white text-black bg-opacity-25 backdrop-blur-sm px-6 py-8 text-center">
+                  <p className="text-xl font-semibold">
+                    Thank you for subscribing!
+                  </p>
+                  <p className="mt-2 opacity-90">
+                    Stay tuned for updates on our NFT collection.
+                  </p>
                 </div>
+              )}
             </div>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default Newsletter;
diff --git a/components/ui/ViewAllButton.tsx b/components/ui/ViewAllButton.tsx
index 867313b..e75e74f 100644
--- a/components/ui/ViewAllButton.tsx
+++ b/components/ui/ViewAllButton.tsx
@@ -2,8 +2,8 @@ import Arrow from "@/public/arrow.png";
 import Image from "next/image";
 
 export const ViewAllButton: React.FC = () => (
-  <button className="bg-zinc-800 hover:bg-zinc-700 text-white font-medium py-3 px-6 rounded-lg flex items-center gap-2 transition-colors">
+  <button className="bg-zinc-800 w-full sm:w-fit hover:bg-zinc-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition-colors">
     View all
     <Image src={Arrow} alt="arrow icon" />
   </button>
-);
\ No newline at end of file
+);
diff --git a/constants/data.ts b/constants/data.ts
index 32b2e50..8522f02 100644
--- a/constants/data.ts
+++ b/constants/data.ts
@@ -164,156 +164,155 @@ export const articleData: ArticleProps[] = [
   {
     id: 1,
     title: "The Future of NFT Auctions on Starknet",
-    description: "Discover how StarkBid is transforming the NFT auction space with Starknet's Layer-2 technology.",
-    imageUrl: "blog1.png"
+    description:
+      "Discover how StarkBid is transforming the NFT auction space with Starknet's Layer-2 technology.",
+    imageUrl: "blog1.png",
   },
   {
     id: 2,
     title: "Exclusive Interview with Top NFT Creators",
-    description: "Meet renowned artists and creators who are launching their NFTs on StarkBid.",
-    imageUrl: "blog2.png"
+    description:
+      "Meet renowned artists and creators who are launching their NFTs on StarkBid.",
+    imageUrl: "blog2.png",
   },
   {
     id: 3,
     title: "How StarkBid Ensures Transparent & Secure Bidding",
-    description: "A deep dive into our fair bidding system, smart contract security, and low-fee transactions.",
-    imageUrl: "blog3.png"
-  }
-
+    description:
+      "A deep dive into our fair bidding system, smart contract security, and low-fee transactions.",
+    imageUrl: "blog3.png",
+  },
 ];
 
-
-
-  
-  export const trendingCollections = [
-    {
-      id: 1,
-      name: 'Xenos',
-      icon: '/collections_icons/xenos.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '+20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 2,
-      name: 'Bored Apes',
-      icon: '/collections_icons/bored_ape.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '-20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 3,
-      name: 'Monalissa',
-      icon: '/collections_icons/monalisa.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '-20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 4,
-      name: 'Bad Bunniez',
-      icon: '/collections_icons/bad_bunniez.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '-20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 5,
-      name: 'Mickymore',
-      icon: '/collections_icons/micky_moore.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '+20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 6,
-      name: 'Zam Califoral',
-      icon: '/collections_icons/zain_califoral.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '-20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 7,
-      name: 'The Vagaaburn',
-      icon: '/collections_icons/the_vagaaburn.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '+20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 8,
-      name: 'Bullies',
-      icon: '/collections_icons/bullies.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '+20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 9,
-      name: 'Dan Xylym',
-      icon: '/collections_icons/Dan_xylym.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '-20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    },
-    {
-      id: 10,
-      name: 'Net Dream',
-      icon: '/collections_icons/netDream.svg',
-      floorPrice: '35 ETH',
-      volume: '200 ETH',
-      topOffer: '31 ETH',
-      change: '-20.40%',
-      sales: 150,
-      totalVolume: '456.00k',
-      holder: 45,
-      rate:'2065/1498'
-    }
-  ];
+export const trendingCollections = [
+  {
+    id: 1,
+    name: "Xenos",
+    icon: "/collections_icons/xenos.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "+20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 2,
+    name: "Bored Apes",
+    icon: "/collections_icons/bored_ape.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "-20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 3,
+    name: "Monalissa",
+    icon: "/collections_icons/monalisa.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "-20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 4,
+    name: "Bad Bunniez",
+    icon: "/collections_icons/bad_bunniez.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "-20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 5,
+    name: "Mickymore",
+    icon: "/collections_icons/micky_moore.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "+20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 6,
+    name: "Zam Califoral",
+    icon: "/collections_icons/zain_califoral.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "-20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 7,
+    name: "The Vagaaburn",
+    icon: "/collections_icons/the_vagaaburn.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "+20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 8,
+    name: "Bullies",
+    icon: "/collections_icons/bullies.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "+20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 9,
+    name: "Dan Xylym",
+    icon: "/collections_icons/Dan_xylym.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "-20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+  {
+    id: 10,
+    name: "Net Dream",
+    icon: "/collections_icons/netDream.svg",
+    floorPrice: "35 ETH",
+    volume: "200 ETH",
+    topOffer: "31 ETH",
+    change: "-20.40%",
+    sales: 150,
+    totalVolume: "456.00k",
+    holder: 45,
+    rate: "2065/1498",
+  },
+];
diff --git a/constants/footer.ts b/constants/footer.ts
index aac6468..9cfbb4c 100644
--- a/constants/footer.ts
+++ b/constants/footer.ts
@@ -29,3 +29,22 @@ export const socialLinks = [
     url: "https://instagram.com",
   },
 ];
+
+export const mobileLinks = {
+  Collections: [
+    "Art",
+    "Photography",
+    "Music",
+    "Game",
+    "Community",
+    "Lifestyle",
+  ],
+  Resources: [
+    "Explore",
+    "Support",
+    "Blog",
+    "Terms of Service",
+    "Privacy policy",
+    "Copyright",
+  ],
+};
diff --git a/constants/types.ts b/constants/types.ts
new file mode 100644
index 0000000..957fca5
--- /dev/null
+++ b/constants/types.ts
@@ -0,0 +1,13 @@
+export type CollectionType = {
+  id: number;
+  name: string;
+  icon: string;
+  floorPrice: string;
+  volume: string;
+  topOffer: string;
+  change: string;
+  sales: number;
+  totalVolume: string;
+  holder: number;
+  rate: string;
+};