diff --git a/app/(app)/_layout/BottomNav.tsx b/app/(app)/_layout/BottomNav.tsx
index 7e894af..8dc7dfc 100644
--- a/app/(app)/_layout/BottomNav.tsx
+++ b/app/(app)/_layout/BottomNav.tsx
@@ -28,8 +28,8 @@ export default function BottomNav() {
     },
   ];
   return (
-    <footer className="flex-0 flex h-[var(--bottom-nav-height)] sm:hidden">
-      <div className="fixed inset-x-0 bottom-0 flex h-[var(--bottom-nav-height)] flex-1 items-center justify-between border-t px-4">
+    <footer className="z-header- flex h-[var(--bottom-nav-height)] w-full bg-background sm:hidden">
+      <div className="fixed inset-x-0 bottom-0 flex h-[var(--bottom-nav-height)] flex-1 items-center justify-between border-t bg-background px-4">
         {navigationItems.map((item) => (
           <Link href={item.href} className="center group group flex-1">
             <item.icon
diff --git a/app/(app)/_layout/Header.tsx b/app/(app)/_layout/Header.tsx
index 52d2885..a69f45e 100644
--- a/app/(app)/_layout/Header.tsx
+++ b/app/(app)/_layout/Header.tsx
@@ -6,7 +6,7 @@ import { MobileMenu } from "./components/MobileMenu";
 export default function Header() {
   return (
     <header className="flex h-[var(--header-height)] shrink-0 grow-0 ">
-      <div className="fixed flex h-[var(--header-height)] w-full grow border-b p-5 sm:w-[calc(100vw_-_var(--sidebar-closed-width))] sm:border-b-0 sm:py-0 xl:w-[calc(100vw_-_var(--sidebar-open-width))]">
+      <div className="fixed z-header flex h-[var(--header-height)] w-full grow border-b bg-background p-5 sm:w-[calc(100vw_-_var(--sidebar-closed-width))] sm:border-b-0 sm:py-0 xl:w-[calc(100vw_-_var(--sidebar-open-width))]">
         <div className="flex flex-1 items-stretch justify-between gap-x-4 sm:border-b">
           <div className="center justify-between gap-x-3 text-foreground">
             <RiLeafFill className="h-6 w-6 sm:hidden" />
diff --git a/app/(app)/_layout/index.tsx b/app/(app)/_layout/index.tsx
index 9d40eb1..5000e92 100644
--- a/app/(app)/_layout/index.tsx
+++ b/app/(app)/_layout/index.tsx
@@ -15,7 +15,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
 
       {/* Sidebar */}
       <Sidebar />
-      <div className="relative flex shrink-0 grow justify-center overflow-x-hidden">
+      <div className="relative flex  flex-1 shrink-0 grow justify-center overflow-x-hidden">
         <div className="flex-1 overflow-x-hidden px-5">{children}</div>
       </div>
       {/* Mobile Banner */}
diff --git a/app/(app)/app/_sections/HorizontalCarousel.tsx b/app/(app)/app/_sections/HorizontalCarousel.tsx
index 071fde5..677b172 100644
--- a/app/(app)/app/_sections/HorizontalCarousel.tsx
+++ b/app/(app)/app/_sections/HorizontalCarousel.tsx
@@ -46,7 +46,7 @@ export default function HorizontalCarousel() {
   return (
     <div className="scrollbar-thumb-rounded-full mr-auto flex min-w-0 max-w-full snap-x snap-mandatory overflow-x-auto pl-5 pr-[50vw] scrollbar-thin sm:pr-[200px]">
       {cards.map((creator) => (
-        <div className="snap-start pl-5">
+        <div className="snap-start pl-2 sm:pl-5">
           <CreatorCard key={creator.displayName} {...creator} />
         </div>
       ))}