diff --git a/src/App.tsx b/src/App.tsx
index c76e665..e42be10 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import Community from './components/Community';
 import PWAInstallPrompt from './components/PWAInstallPrompt';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { ToastProvider } from './contexts/ToastContext';
+import CardMosaicBackground from "./components/CardMosaicBackground.tsx";
 
 type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'search' | 'life-counter' | 'community';
 
@@ -40,7 +41,7 @@ function AppContent() {
     switch (currentPage) {
       case 'home':
         return (
-          <div className="relative bg-gray-900 text-white p-3 sm:p-6 animate-fade-in md:min-h-screen">
+          <div className="relative  text-white p-3 sm:p-6 animate-fade-in md:min-h-screen">
             <div className="max-w-7xl mx-auto">
               <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 animate-slide-in-left">My Decks</h1>
               <DeckList
@@ -78,9 +79,12 @@ function AppContent() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 flex flex-col">
+    <div className="min-h-screen bg-gray-900 flex flex-col relative">
+      {/* Animated card mosaic overlay */}
+      <CardMosaicBackground />
+
       <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
-      <main className="relative flex-1 overflow-y-auto">
+      <main className="relative flex-1 overflow-y-auto z-20">
         <div className="relative min-h-full md:min-h-0 pt-0 md:pt-16 pb-20 md:pb-0">
           {renderPage()}
         </div>
diff --git a/src/components/CardSearch.tsx b/src/components/CardSearch.tsx
index 963b29b..50304fc 100644
--- a/src/components/CardSearch.tsx
+++ b/src/components/CardSearch.tsx
@@ -201,7 +201,7 @@ const CardSearch = () => {
   };
 
   return (
-    <div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
+    <div className="relative text-white p-3 sm:p-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Card Search</h1>
         <form onSubmit={handleSearch} className="mb-8 space-y-4">
diff --git a/src/components/Collection.tsx b/src/components/Collection.tsx
index 118936f..4e8fde0 100644
--- a/src/components/Collection.tsx
+++ b/src/components/Collection.tsx
@@ -321,7 +321,7 @@ export default function Collection() {
   };
 
   return (
-    <div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
+    <div className="relative text-white p-3 sm:p-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">My Collection</h1>
 
diff --git a/src/components/Community.tsx b/src/components/Community.tsx
index 8625ac4..f57ee95 100644
--- a/src/components/Community.tsx
+++ b/src/components/Community.tsx
@@ -696,7 +696,7 @@ export default function Community() {
     );
 
     return (
-      <div className="relative bg-gray-900 text-white min-h-screen">
+      <div className="relative text-white min-h-screen">
         <div className="max-w-7xl mx-auto p-3 sm:p-6">
           {/* Header with Back and Trade buttons */}
           <div className="flex items-center justify-between gap-2 mb-4 md:mb-6">
@@ -1027,7 +1027,7 @@ export default function Community() {
 
   // ============ MAIN VIEW ============
   return (
-    <div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
+    <div className="relative text-white p-3 sm:p-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
         {/* Header */}
         <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Community</h1>
diff --git a/src/components/DeckList.tsx b/src/components/DeckList.tsx
index abfbbee..ef60cab 100644
--- a/src/components/DeckList.tsx
+++ b/src/components/DeckList.tsx
@@ -77,7 +77,7 @@ const DeckList = ({ onDeckEdit, onCreateDeck }: DeckListProps) => {
       {/* Create New Deck Card */}
       <button
         onClick={onCreateDeck}
-        className="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group aspect-[5/7] flex flex-col items-center justify-center gap-3 p-4"
+        className="rounded-lg overflow-hidden shadow-lg hover:shadow-xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group aspect-[5/7] flex flex-col items-center justify-center gap-3 p-4"
       >
         <PlusCircle size={48} className="text-gray-600 group-hover:text-blue-500 transition-colors" />
         <div className="text-center">