diff --git a/app/globals.css b/app/globals.css
index da3eaa3..fb6d07d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -294,3 +294,7 @@
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
+
+.container-main {
+  @apply w-full max-w-[1440px] mx-auto px-4 sm:px-6 md:px-8 lg:px-20;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..08fcea8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Wodey",
+  description: "Wodey",
 };
 
 export default function RootLayout({
diff --git a/components/custom/Best_Seller.tsx b/components/custom/Best_Seller.tsx
index 76eda50..1f2a080 100644
--- a/components/custom/Best_Seller.tsx
+++ b/components/custom/Best_Seller.tsx
@@ -49,38 +49,40 @@ const books = [
 
 export default function BestSeller() {
   return (
-    <div className="w-full py-8 px-20">
-      <div className="flex items-center justify-between mb-2 px-2">
-        <h2 className="text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
-        <a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
-      </div>
-      <div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
-      <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
-        {books.map((book) => (
-          <div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
-            <div className="relative w-[158px] h-[235px] flex items-center justify-center">
-              <Image
-                src={book.cover}
-                alt={book.title}
-                fill
-                style={{ objectFit: 'cover', borderRadius: 4 }}
-                className="transition group-hover:scale-105 duration-200"
-              />
-            </div>
-            <div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
-              <div className="flex items-center justify-between">
-                <span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
-                <Button variant="ghost" size="icon" className="ml-2">
-                  <Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
-                </Button>
+    <div className="w-full py-8">
+      <div className="container-main">
+        <div className="flex items-center justify-between mb-2 px-2">
+          <h2 className="text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
+          <a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
+        </div>
+        <div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
+        <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
+          {books.map((book) => (
+            <div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
+              <div className="relative w-[158px] h-[235px] flex items-center justify-center">
+                <Image
+                  src={book.cover}
+                  alt={book.title}
+                  fill
+                  style={{ objectFit: 'cover', borderRadius: 4 }}
+                  className="transition group-hover:scale-105 duration-200"
+                />
               </div>
-              <div className="flex items-center justify-between mt-0.5">
-                <span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
-                <span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
+              <div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
+                <div className="flex items-center justify-between">
+                  <span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
+                  <Button variant="ghost" size="icon" className="ml-2">
+                    <Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
+                  </Button>
+                </div>
+                <div className="flex items-center justify-between mt-0.5">
+                  <span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
+                  <span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/components/custom/Home_Banner.tsx b/components/custom/Home_Banner.tsx
index 2890bd4..9e9bf57 100644
--- a/components/custom/Home_Banner.tsx
+++ b/components/custom/Home_Banner.tsx
@@ -4,18 +4,18 @@ import Image from "next/image";
 export default function HomeBanner() {
   return (
     <div className="w-full">
-      <div className="max-w-[1440px] mx-auto px-20 mt-10">
+      <div className="container-main mt-10">
         <div className="relative h-[240px] md:h-[260px] bg-[rgba(255,248,238,0.9)] rounded-2xl overflow-hidden flex items-center justify-between">
           {/* Left: Text Content */}
-          <div className="z-10 py-8 flex-1 flex flex-col justify-center pl-16 pr-20">
-            <h1 className="text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
+          <div className="z-10 py-8 flex-1 flex flex-col justify-center pl-4 sm:pl-6 md:pl-8 lg:pl-16 pr-4 sm:pr-6 md:pr-8 lg:pr-20">
+            <h1 className="text-[28px] sm:text-[32px] md:text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
               1000 BLACK UMBRELLAS
             </h1>
-            <p className="text-[#151C4F] text-[21px] font-[400] mb-2 max-w-5xl">
-              Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br/> one of the most admired poets in the underground American poetry scene.
+            <p className="text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] font-[400] mb-2 max-w-5xl">
+              Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br className="hidden sm:block"/> one of the most admired poets in the underground American poetry scene.
             </p>
             <Button 
-              className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[21px] w-fit px-6 py-3 font-[400] rounded-md mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer"
+              className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] w-fit px-4 sm:px-5 md:px-6 py-2 sm:py-3 font-[400] rounded-md mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer"
               size="lg"
             >
               PURCHASE EBOOK
@@ -23,7 +23,7 @@ export default function HomeBanner() {
           </div>
 
           {/* Right: Book Cover */}
-          <div className="hidden md:block absolute" style={{ top: '85.44px', left: '986px' }}>
+          <div className="hidden md:block absolute" style={{ top: '85.44px', right: '20px' }}>
             <Image
               src="/book.png"
               alt="1000 Black Umbrellas Book Cover"
diff --git a/components/custom/New_Release.tsx b/components/custom/New_Release.tsx
index d0483cd..e984b0d 100644
--- a/components/custom/New_Release.tsx
+++ b/components/custom/New_Release.tsx
@@ -49,38 +49,40 @@ const books = [
 
 export default function NewRelease() {
   return (
-    <div className="w-full py-8 px-20">
-      <div className="flex items-center justify-between mb-2 px-2">
-        <h2 className="text-[15px] font-[600] text-[#151C4F]">New Release</h2>
-        <a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
-      </div>
-      <div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
-      <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
-        {books.map((book) => (
-          <div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
-            <div className="relative w-[158px] h-[235px] flex items-center justify-center">
-              <Image
-                src={book.cover}
-                alt={book.title}
-                fill
-                style={{ objectFit: 'cover', borderRadius: 4 }}
-                className="transition group-hover:scale-105 duration-200"
-              />
-            </div>
-            <div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
-              <div className="flex items-center justify-between">
-                <span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
-                <Button variant="ghost" size="icon" className="ml-2">
-                  <Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
-                </Button>
+    <div className="w-full py-8">
+      <div className="container-main">
+        <div className="flex items-center justify-between mb-2 px-2">
+          <h2 className="text-[15px] font-[600] text-[#151C4F]">New Release</h2>
+          <a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
+        </div>
+        <div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
+        <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
+          {books.map((book) => (
+            <div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
+              <div className="relative w-[158px] h-[235px] flex items-center justify-center">
+                <Image
+                  src={book.cover}
+                  alt={book.title}
+                  fill
+                  style={{ objectFit: 'cover', borderRadius: 4 }}
+                  className="transition group-hover:scale-105 duration-200"
+                />
               </div>
-              <div className="flex items-center justify-between mt-0.5">
-                <span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
-                <span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
+              <div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
+                <div className="flex items-center justify-between">
+                  <span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
+                  <Button variant="ghost" size="icon" className="ml-2">
+                    <Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
+                  </Button>
+                </div>
+                <div className="flex items-center justify-between mt-0.5">
+                  <span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
+                  <span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/components/custom/marketplace_Navbar.tsx b/components/custom/marketplace_Navbar.tsx
index e870308..533af68 100644
--- a/components/custom/marketplace_Navbar.tsx
+++ b/components/custom/marketplace_Navbar.tsx
@@ -6,61 +6,63 @@ import { Button } from '@/components/ui/button';
 
 function MarketplaceNavbar() {
   return (
-    <nav className="w-full h-[56px] bg-[#010313] flex items-center px-20 justify-between">
-      {/* Logo and Brand */}
-      <div className="flex items-center gap-2 min-w-[180px]">
-        <Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
-        <span className="text-white text-2xl ml-1 font-normal">Woedii</span>
-      </div>
-      {/* Search Bar */}
-      <div className="flex-1 flex justify-center">
-        <div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}>
-          <svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
-          <Input
-            type="text"
-            placeholder="Search images, videos, fonts, graphics and more"
-            className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
-            style={{ height: 40 }}
-          />
+    <nav className="w-full bg-[#010313]">
+      <div className="container-main h-[56px] flex items-center justify-between">
+        {/* Logo and Brand */}
+        <div className="flex items-center gap-2 min-w-[180px]">
+          <Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
+          <span className="text-white text-2xl ml-1 font-normal">Wodey</span>
         </div>
-      </div>
-      {/* Right Side Icons and Profile */}
-      <div className="flex items-center gap-8 min-w-[420px] justify-end">
-        {/* Notifications */}
-        <div className="relative cursor-pointer flex flex-col items-center justify-center">
-          <div className="relative flex items-center justify-center">
-            <Bell size={22} className="text-white" />
-            <span className="absolute -top-1 -right-1 w-[9px] h-[9px] bg-[#FF3B30] rounded-full border-[1.5px] border-[#020316]" />
+        {/* Search Bar */}
+        <div className="flex-1 flex justify-center">
+          <div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}>
+            <svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
+            <Input
+              type="text"
+              placeholder="Search images, videos, fonts, graphics and more"
+              className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
+              style={{ height: 40 }}
+            />
           </div>
-          <span className="text-xs text-white mt-1">Notifications</span>
         </div>
-        {/* Favorites */}
-        <div className="cursor-pointer flex flex-col items-center justify-center">
-          <Heart size={22} className="text-white" />
-          <span className="text-xs text-white mt-1">Favorites</span>
-        </div>
-        {/* Cart */}
-        <div className="cursor-pointer flex flex-col items-center justify-center">
-          <ShoppingCart size={22} className="text-white" />
-          <span className="text-xs text-white mt-1">Cart</span>
-        </div>
-        {/* Profile */}
-        <div className="cursor-pointer flex flex-col items-center justify-center">
-          <div className="flex items-center justify-center">
-            <Avatar className="w-6 h-6">
-              <AvatarImage src="/avatar.png" alt="Profile" />
-              <AvatarFallback>U</AvatarFallback>
-            </Avatar>
+        {/* Right Side Icons and Profile */}
+        <div className="flex items-center gap-8 min-w-[420px] justify-end">
+          {/* Notifications */}
+          <div className="relative cursor-pointer flex flex-col items-center justify-center">
+            <div className="relative flex items-center justify-center">
+              <Bell size={22} className="text-white" />
+              <span className="absolute -top-1 -right-1 w-[9px] h-[9px] bg-[#FF3B30] rounded-full border-[1.5px] border-[#020316]" />
+            </div>
+            <span className="text-xs text-white mt-1">Notifications</span>
           </div>
-          <span className="text-xs text-white mt-1">My Profile</span>
+          {/* Favorites */}
+          <div className="cursor-pointer flex flex-col items-center justify-center">
+            <Heart size={22} className="text-white" />
+            <span className="text-xs text-white mt-1">Favorites</span>
+          </div>
+          {/* Cart */}
+          <div className="cursor-pointer flex flex-col items-center justify-center">
+            <ShoppingCart size={22} className="text-white" />
+            <span className="text-xs text-white mt-1">Cart</span>
+          </div>
+          {/* Profile */}
+          <div className="cursor-pointer flex flex-col items-center justify-center">
+            <div className="flex items-center justify-center">
+              <Avatar className="w-6 h-6">
+                <AvatarImage src="/avatar.png" alt="Profile" />
+                <AvatarFallback>U</AvatarFallback>
+              </Avatar>
+            </div>
+            <span className="text-xs text-white mt-1">My Profile</span>
+          </div>
+          {/* Create Button */}
+          <a href="/creator">
+          <Button className="flex items-center gap-2 bg-[#0093A5] text-white px-5 py-2 rounded-lg font-medium text-base transition-colors ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
+            <SquarePen size={18} />
+            Create
+          </Button>
+          </a>
         </div>
-        {/* Create Button */}
-        <a href="/creator">
-        <Button className="flex items-center gap-2 bg-[#0093A5] text-white px-5 py-2 rounded-lg font-medium text-base transition-colors ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
-          <SquarePen size={18} />
-          Create
-        </Button>
-        </a>
       </div>
     </nav>
   );
@@ -68,14 +70,16 @@ function MarketplaceNavbar() {
 
 function MarketplaceSecondaryMenu() {
   return (
-    <div className="w-full bg-[#010313] flex items-center px-20 h-7 border-t border-white/20 p-5">
-      <ul className="flex gap-10 text-white text-sm font-normal">
-        <li className="cursor-pointer">Images</li>
-        <li className="cursor-pointer">Videos</li>
-        <li className="cursor-pointer">Audios</li>
-        <li className="cursor-pointer">Gifs</li>
-        <li className="cursor-pointer">Fonts</li>
-      </ul>
+    <div className="w-full bg-[#010313] border-t border-white/20">
+      <div className="container-main flex items-center h-7 p-5">
+        <ul className="flex gap-10 text-white text-sm font-normal">
+          <li className="cursor-pointer">Images</li>
+          <li className="cursor-pointer">Videos</li>
+          <li className="cursor-pointer">Audios</li>
+          <li className="cursor-pointer">Gifs</li>
+          <li className="cursor-pointer">Fonts</li>
+        </ul>
+      </div>
     </div>
   );
 }
diff --git a/public/videos/background2.mp4 b/public/videos/background2.mp4
index 6bfd901..bd5187e 100644
Binary files a/public/videos/background2.mp4 and b/public/videos/background2.mp4 differ
diff --git a/public/videos/background3.mp4 b/public/videos/background3.mp4
index bd5187e..6bfd901 100644
Binary files a/public/videos/background3.mp4 and b/public/videos/background3.mp4 differ