diff --git a/public/images/generic_logo.jpg b/public/images/generic_logo.jpg
new file mode 100644
index 0000000..6012302
Binary files /dev/null and b/public/images/generic_logo.jpg differ
diff --git a/public/images/logo-tcg-love.png b/public/images/logo-tcg-love.png
deleted file mode 100644
index 54ab053..0000000
Binary files a/public/images/logo-tcg-love.png and /dev/null differ
diff --git a/src/app/admin/AdminClient.tsx b/src/app/admin/AdminClient.tsx
index b416133..6df383e 100644
--- a/src/app/admin/AdminClient.tsx
+++ b/src/app/admin/AdminClient.tsx
@@ -5,131 +5,144 @@ import handleUpdateCoins from "./AdminServer";
 import GiveawayManagement from "./GiveawayManagementCards";
 
 interface AdminClientProps {
-    email: string;
+  email: string;
 }
 
 export default function AdminClient({ email }: AdminClientProps) {
-    const [giveaway, setGiveaway] = useState({ 
-        title: "", 
-        description: "", 
-        value: 0, 
-        prize: "", 
-        entryCost: 70000000, 
-        duration: 0,  
-        endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime() // Set to tomorrow
+  const [giveaway, setGiveaway] = useState({
+    title: "",
+    description: "",
+    value: 0,
+    prize: "",
+    entryCost: 70000000,
+    duration: 0,
+    endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime(),
+  });
+  const [youtube_url, setYoutubeUrl] = useState("");
+  const [coin_value, setCoinValue] = useState(0);
+  const [showGiveawayManagement, setShowGiveawayManagement] = useState(false);
+
+  const handleCreateGiveaway = async () => {
+    const response = await fetch("/api/admin/create-giveaway", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(giveaway),
     });
-    const [youtube_url, setYoutubeUrl] = useState("");
-    const [coin_value, setCoinValue] = useState(0);
-    const [showGiveawayManagement, setShowGiveawayManagement] = useState(false);
+    if (response.ok) {
+      alert("Giveaway created successfully!");
+      setGiveaway({
+        title: "",
+        description: "",
+        value: 0,
+        prize: "",
+        entryCost: 70000000,
+        duration: 0,
+        endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime(),
+      });
+    } else {
+      const error = await response.json();
+      alert(`Failed to create giveaway: ${error.error}`);
+    }
+  };
 
-    const handleCreateGiveaway = async () => {
-        const response = await fetch("/api/admin/create-giveaway", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(giveaway),
-        });
-        if (response.ok) {
-            alert("Giveaway created successfully!");
-            
-            setGiveaway({ title: "", description: "", value: 0, prize: "", entryCost: 70000000, duration: 0,  endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime() }); // Reset form
-        } else {
-            const error = await response.json();
-            alert(`Failed to create giveaway: ${error.error}`);
-        }
-    };
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto space-y-10">
+        <h1 className="text-4xl font-bold text-white">Admin Dashboard</h1>
+        <p className="text-lg text-gray-300">
+          Welcome, <span className="font-medium">{email}</span>!
+        </p>
 
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 text-black py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-3xl mx-auto space-y-10">
-          <h1 className="text-4xl font-bold text-pink-700">Admin Dashboard</h1>
-          <p className="text-lg text-gray-700">Welcome, <span className="font-medium">{email}</span>!</p>
-
-          {/* Create Giveaway Form */}
-          <div className="bg-white border border-pink-200 p-6 rounded-2xl shadow-lg">
-            <h2 className="text-2xl font-semibold text-pink-700 mb-4">🎁 Create Giveaway</h2>
-            <div className="space-y-3">
-              <input
-                type="text"
-                placeholder="Giveaway Title"
-                value={giveaway.title}
-                onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
-                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
-              />
-              <textarea
-                placeholder="Description"
-                value={giveaway.description}
-                onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })}
-                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
-              />
-              <input
-                type="text"
-                placeholder="Prize"
-                value={giveaway.prize}
-                onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })}
-                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
-              />
-              <input
-                type="number"
-                placeholder="Value in Coins"
-                value={giveaway.value || ""}
-                onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
-                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
-              />
-              <input
-                type="datetime-local"
-                placeholder="Ends At"
-                value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""}
-                onChange={(e) => setGiveaway({ ...giveaway, endsAt: Date.parse(e.target.value) })}
-                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
-              />
-              <button
-                onClick={handleCreateGiveaway}
-                className="w-full bg-gradient-to-r from-pink-500 to-yellow-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
-              >
-                🚀 Create Giveaway
-              </button>
-            </div>
-          </div>
-
-          {/* Update User Coins Form */}
-          <div className="bg-white border border-green-200 p-6 rounded-2xl shadow-lg">
-            <h2 className="text-2xl font-semibold text-green-700 mb-4">💸 Update User Coins</h2>
-            <div className="space-y-3">
-              <input
-                type="text"
-                placeholder="YouTube Video URL"
-                value={youtube_url}
-                onChange={(e) => setYoutubeUrl(e.target.value)}
-                className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
-              />
-              <input
-                type="number"
-                placeholder="Coins to Add"
-                value={coin_value || ""}
-                onChange={(e) => setCoinValue(Number(e.target.value))}
-                className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
-              />
-              <button
-                onClick={() => handleUpdateCoins(youtube_url, coin_value)}
-                className="w-full bg-gradient-to-r from-green-500 to-lime-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
-              >
-                ✅ Update Coins
-              </button>
-            </div>
-          </div>
-
-          {/* Toggle Giveaway Management */}
-          <div className="bg-white border border-blue-200 p-6 rounded-2xl shadow-lg">
-            <h2 className="text-2xl font-semibold text-blue-700 mb-4">🎮 Giveaway Management</h2>
+        {/* Create Giveaway Form */}
+        <div className="bg-gray-800 border border-gray-700 p-6 rounded-2xl shadow-lg">
+          <h2 className="text-2xl font-semibold text-white mb-4">🎁 Create Giveaway</h2>
+          <div className="space-y-3">
+            <input
+              type="text"
+              placeholder="Giveaway Title"
+              value={giveaway.title}
+              onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
+              className="w-full p-3 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white"
+            />
+            <textarea
+              placeholder="Description"
+              value={giveaway.description}
+              onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })}
+              className="w-full p-3 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white"
+            />
+            <input
+              type="text"
+              placeholder="Prize"
+              value={giveaway.prize}
+              onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })}
+              className="w-full p-3 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white"
+            />
+            <input
+              type="number"
+              placeholder="Value in Coins"
+              value={giveaway.value || ""}
+              onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
+              className="w-full p-3 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white"
+            />
+            <input
+              type="datetime-local"
+              placeholder="Ends At"
+              value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""}
+              onChange={(e) => setGiveaway({ ...giveaway, endsAt: Date.parse(e.target.value) })}
+              className="w-full p-3 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white"
+            />
             <button
-              onClick={() => setShowGiveawayManagement((prev) => !prev)}
-              className="w-full bg-gradient-to-r from-blue-500 to-indigo-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
+              onClick={handleCreateGiveaway}
+              className="w-full bg-gradient-to-r from-white to-gray-400 text-black font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
             >
-              {showGiveawayManagement ? "Hide Giveaway Management" : "Show Giveaway Management"}
+              🚀 Create Giveaway
             </button>
-            {showGiveawayManagement && <GiveawayManagement />}
           </div>
         </div>
+
+        {/* Update User Coins Form */}
+        <div className="bg-gray-800 border border-gray-700 p-6 rounded-2xl shadow-lg">
+          <h2 className="text-2xl font-semibold text-white mb-4">💸 Update User Coins</h2>
+          <div className="space-y-3">
+            <input
+              type="text"
+              placeholder="YouTube Video URL"
+              value={youtube_url}
+              onChange={(e) => setYoutubeUrl(e.target.value)}
+              className="w-full p-3 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white"
+            />
+            <input
+              type="number"
+              placeholder="Coins to Add"
+              value={coin_value || ""}
+              onChange={(e) => setCoinValue(Number(e.target.value))}
+              className="w-full p-3 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white"
+            />
+            <button
+              onClick={() => handleUpdateCoins(youtube_url, coin_value)}
+              className="w-full bg-gradient-to-r from-white to-gray-400 text-black font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
+            >
+              ✅ Update Coins
+            </button>
+          </div>
+        </div>
+
+        {/* Toggle Giveaway Management */}
+        <div className="bg-gray-800 border border-gray-700 p-6 rounded-2xl shadow-lg">
+          <h2 className="text-2xl font-semibold text-white mb-4">🎮 Giveaway Management</h2>
+          <button
+            onClick={() => setShowGiveawayManagement((prev) => !prev)}
+            className="w-full bg-gradient-to-r from-white to-gray-400 text-black font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
+          >
+            {showGiveawayManagement ? "Hide Giveaway Management" : "Show Giveaway Management"}
+          </button>
+          {showGiveawayManagement && (
+            <div className="mt-6">
+              <GiveawayManagement />
+            </div>
+          )}
+        </div>
       </div>
-    );
-}      
\ No newline at end of file
+    </div>
+  );
+}
diff --git a/src/app/giveaways/page.tsx b/src/app/giveaways/page.tsx
index d96e286..2724e36 100644
--- a/src/app/giveaways/page.tsx
+++ b/src/app/giveaways/page.tsx
@@ -8,7 +8,7 @@ export default async function GiveawaysPage() {
   const session = await getServerSession(authOptions);
 
   if (!session?.user?.email) {
-      redirect("/api/auth/signin");
+    redirect("/api/auth/signin");
   }
 
   const giveaways = await db.giveaway.findMany({
@@ -35,64 +35,63 @@ export default async function GiveawaysPage() {
   });
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 py-12 px-4 sm:px-6 lg:px-8 font-sans">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 py-12 px-4 sm:px-6 lg:px-8 font-sans text-white">
       <div className="max-w-7xl mx-auto">
         {/* Header */}
         <h1 className="text-4xl sm:text-5xl font-bold mb-10 text-center drop-shadow-md">
-          🎁  
-          {"   "}
-          <span className="bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent">
+          🎁{" "}
+          <span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
             Active Giveaways
           </span>
         </h1>
-  
+
         {/* Grid of Cards */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 text-black">
-            {giveaways
+          {giveaways
             .filter((giveaway) => {
               const remainingTime =
-              new Date(giveaway.endsAt ?? 0).getTime() - Date.now();
+                new Date(giveaway.endsAt ?? 0).getTime() - Date.now();
               return remainingTime > 0;
             })
             .map((giveaway) => {
               const remainingTime = Math.max(
-              0,
-              new Date(giveaway.endsAt ?? 0).getTime() - Date.now()
+                0,
+                new Date(giveaway.endsAt ?? 0).getTime() - Date.now()
               );
 
               const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
               const hours = Math.floor(
-              (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+                (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
               );
               const minutes = Math.floor(
-              (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
+                (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
               );
 
               const countdownText =
-              days > 0
-                ? `${days}d ${hours}h ${minutes}m left`
-                : hours > 0
-                ? `${hours}h ${minutes}m left`
-                : `${minutes}m left`;
+                days > 0
+                  ? `${days}d ${hours}h ${minutes}m left`
+                  : hours > 0
+                  ? `${hours}h ${minutes}m left`
+                  : `${minutes}m left`;
 
               return (
-              <div
-                key={giveaway.id}
-                className="bg-white rounded-2xl shadow-lg border-2 border-pink-200 hover:shadow-xl transition-shadow duration-300"
-              >
-                <GiveawayCard
-                giveawayId={giveaway.id}
-                title={giveaway.title}
-                description={`${giveaway.description} — 🕒 ${countdownText}`}
-                imageUrl={giveaway.prize}
-                value={giveaway.value}
-                userId={user?.id ?? ""}
-                />
-              </div>
+                <div
+                  key={giveaway.id}
+                  className="bg-gray-800 rounded-2xl shadow-lg border border-gray-600 hover:shadow-xl transition-shadow duration-300"
+                >
+                  <GiveawayCard
+                    giveawayId={giveaway.id}
+                    title={giveaway.title}
+                    description={`${giveaway.description} — 🕒 ${countdownText}`}
+                    imageUrl={giveaway.prize}
+                    value={giveaway.value}
+                    userId={user?.id ?? ""}
+                  />
+                </div>
               );
             })}
         </div>
       </div>
     </div>
   );
-}  
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 776d62f..d12cea3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,78 +7,73 @@ export default function GiveawaySystem() {
   const [activeTab, setActiveTab] = useState("how");
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-yellow-100 to-pink-200 py-12 px-4 sm:px-6 lg:px-8 font-sans">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-700 py-12 px-4 sm:px-6 lg:px-8 font-sans text-white">
       <div className="max-w-4xl mx-auto">
         {/* Header */}
         <div className="text-center mb-12">
           <Image
-            src="/images/logo-tcg-love.png"
-            alt="TCG Love Openings Logo"
-            width={120}
-            height={120}
-            className="mx-auto mb-4 rounded-full border-4 border-pink-400 shadow-lg"
+            src="/images/generic_logo.jpg"
+            alt="Giveaway Logo"
+            width={100}
+            height={100}
+            className="mx-auto mb-4 rounded-full border-4 border-gray-500 shadow-lg"
           />
-          <h1 className="text-4xl sm:text-5xl font-bold mb-2 drop-shadow">
-            🎁{" "}
-            <span className="bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent">
-              TCG Love Giveaway System
-            </span>
-          </h1>
-          <p className="text-lg text-gray-700">Comment. Collect Coins. Win MTG Cards!</p>
+          <h1 className="text-4xl sm:text-5xl font-bold mb-2">🎁 Giveaway System</h1>
+          <p className="text-lg text-gray-300">Earn points. Join raffles. Win rewards.</p>
         </div>
 
         {/* Tabs */}
         <div className="flex justify-center mb-8 space-x-4">
-          {["how", "lottery", "entries", "patreon"].map((tab) => (
+          {["how", "lottery", "entries", "perks"].map((tab) => (
             <button
               key={tab}
               onClick={() => setActiveTab(tab)}
               className={`px-4 py-2 rounded-full font-semibold shadow transition ${
                 activeTab === tab
-                  ? "bg-pink-600 text-white"
-                  : "bg-white text-pink-600 border border-pink-300"
+                  ? "bg-white text-black"
+                  : "bg-gray-800 text-white border border-gray-500"
               }`}
             >
-              {tab === "how" && "🪙 How It Works"}
+              {tab === "how" && "ℹ️ How It Works"}
               {tab === "lottery" && "🎲 Lottery"}
-              {tab === "entries" && "🎟️ Entry Scaling"}
-              {tab === "patreon" && "💖 Patreon Perks"}
+              {tab === "entries" && "📊 Entry Scaling"}
+              {tab === "perks" && "⭐ Perks"}
             </button>
           ))}
         </div>
 
         {/* Tab Content */}
-        <div className="bg-white rounded-2xl shadow-xl p-6 border-2 border-yellow-300 transition-all duration-300">
+        <div className="bg-gray-800 rounded-2xl shadow-xl p-6 border-2 border-gray-600 transition-all duration-300">
           {activeTab === "how" && (
             <div>
-              <h2 className="text-2xl font-bold text-yellow-700 mb-4">How It Works</h2>
-              <ol className="list-decimal pl-6 space-y-3 text-gray-800">
-                <li>💬 Comment on any TCG Love video to earn its coin value.</li>
-                <li>🎁 Use coins to join giveaways (10% of prize value = 1 entry).</li>
-                <li>📈 Entry costs increase after 50, 100, 150 entries.</li>
-                <li>🔥 Some high-value giveaways require you to burn coins.</li>
+              <h2 className="text-2xl font-bold text-white mb-4">How It Works</h2>
+              <ol className="list-decimal pl-6 space-y-3 text-gray-200">
+                <li>💬 Interact to earn points.</li>
+                <li>🎁 Spend points to enter giveaways.</li>
+                <li>📈 Entry cost increases with volume.</li>
+                <li>🔥 Premium rewards may require point burning.</li>
               </ol>
             </div>
           )}
 
           {activeTab === "lottery" && (
             <div>
-              <h2 className="text-2xl font-bold text-purple-700 mb-4">Weighted Lottery</h2>
+              <h2 className="text-2xl font-bold text-white mb-4">Weighted Lottery</h2>
               <div className="space-y-3">
                 {[
-                  { label: "First 100 coins", value: "1x", percent: 100, color: "bg-yellow-400" },
-                  { label: "Next 100 coins", value: "0.5x", percent: 50, color: "bg-green-400" },
-                  { label: "Next 100 coins", value: "0.25x", percent: 25, color: "bg-blue-400" },
-                  { label: "Coins beyond 300", value: "0.1x", percent: 10, color: "bg-red-400" },
+                  { label: "First 100 points", value: "1x", percent: 100 },
+                  { label: "Next 100 points", value: "0.5x", percent: 50 },
+                  { label: "Next 100 points", value: "0.25x", percent: 25 },
+                  { label: "Beyond 300 points", value: "0.1x", percent: 10 },
                 ].map((tier, i) => (
                   <div key={i} className="space-y-1">
-                    <div className="flex justify-between font-medium text-sm text-gray-700">
+                    <div className="flex justify-between font-medium text-sm text-gray-300">
                       <span>{tier.label}</span>
                       <span>{tier.value}</span>
                     </div>
-                    <div className="w-full h-3 rounded-full bg-gray-200 overflow-hidden">
+                    <div className="w-full h-3 rounded-full bg-gray-600 overflow-hidden">
                       <div
-                        className={`${tier.color} h-full`}
+                        className="bg-white h-full"
                         style={{ width: `${tier.percent}%` }}
                       ></div>
                     </div>
@@ -90,47 +85,45 @@ export default function GiveawaySystem() {
 
           {activeTab === "entries" && (
             <div>
-              <h2 className="text-2xl font-bold text-blue-700 mb-4">Entry Scaling & Burning</h2>
-              <p className="text-sm mb-4 text-gray-700">
-                Each giveaway has a base coin cost for one entry. As more entries are added, the cost increases:
+              <h2 className="text-2xl font-bold text-white mb-4">Entry Scaling</h2>
+              <p className="text-sm mb-4 text-gray-300">
+                Entry costs rise as more participants join:
               </p>
-              <ul className="list-disc pl-5 text-sm text-gray-800 space-y-2">
-                <li>🔹 First 50 entries: 10% of prize value</li>
-                <li>🔸 51–100 entries: 15%</li>
-                <li>🔥 100+ entries: 20% + potential coin burn for top-tier cards</li>
+              <ul className="list-disc pl-5 text-sm text-gray-200 space-y-2">
+                <li>🔹 First 50 entries: standard rate</li>
+                <li>🔸 51–100 entries: higher rate</li>
+                <li>🔥 100+ entries: premium rate + possible point burn</li>
               </ul>
-              <div className="mt-4 bg-blue-100 p-4 rounded-lg text-blue-800 text-sm">
-                💡 Some $50+ giveaways will ask you to burn coins (e.g., +50 coins per extra entry).
+              <div className="mt-4 bg-gray-700 p-4 rounded-lg text-gray-200 text-sm">
+                💡 High-value giveaways may require additional point expenditure.
               </div>
             </div>
           )}
 
-          {activeTab === "patreon" && (
+          {activeTab === "perks" && (
             <div>
-              <h2 className="text-2xl font-bold text-red-600 mb-4">Support Us on Patreon</h2>
-              <p className="text-gray-800 mb-2">
-                Become a patron and receive coins automatically every month — no commenting required!
+              <h2 className="text-2xl font-bold text-white mb-4">Supporter Perks</h2>
+              <p className="text-gray-300 mb-2">
+                Get automatic point rewards and exclusive access by supporting us.
               </p>
-              <ul className="list-disc pl-5 text-sm text-gray-800 space-y-2">
-                <li>💎 Monthly coin drops based on your tier</li>
-                <li>🎟️ Access to patron-only giveaways</li>
-                <li>🚀 Helps keep the pack openings flowing!</li>
+              <ul className="list-disc pl-5 text-sm text-gray-200 space-y-2">
+                <li>💎 Monthly point drops</li>
+                <li>🎟️ Private giveaways</li>
+                <li>🚀 Support the system’s growth</li>
               </ul>
               <a
-                href="https://patreon.com/TCG_Love?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_fan&utm_content=join_link"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-block mt-4 px-4 py-2 rounded-full bg-pink-500 text-white font-semibold shadow hover:bg-pink-600 transition"
+                href="#"
+                className="inline-block mt-4 px-4 py-2 rounded-full bg-white text-black font-semibold shadow hover:bg-gray-300 transition"
               >
-                Join Patreon
+                Learn More
               </a>
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="mt-10 text-center text-sm text-gray-500">
-          <p>⚠️ This system is evolving — always check our Discord or YouTube for updates.</p>
+        <div className="mt-10 text-center text-sm text-gray-400">
+          <p>⚠️ This system is evolving. Stay tuned for updates.</p>
         </div>
       </div>
     </div>
diff --git a/src/app/profile/ProfileClient.tsx b/src/app/profile/ProfileClient.tsx
index 49bb5d9..3551d1e 100644
--- a/src/app/profile/ProfileClient.tsx
+++ b/src/app/profile/ProfileClient.tsx
@@ -8,62 +8,66 @@ interface User {
 }
 
 export default function ProfileClient({ user }: { user: User }) {
-
   return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-yellow-100 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-700 py-12 px-4 sm:px-6 lg:px-8 text-white">
       <div className="max-w-3xl mx-auto">
-        <div className="rounded-3xl shadow-xl overflow-hidden bg-white border-4 border-pink-200">
+        <div className="rounded-3xl shadow-xl overflow-hidden bg-gray-800 border-4 border-gray-700">
           {/* Profile Header */}
-          <div className="bg-gradient-to-r from-pink-600 to-yellow-500 p-6 flex items-center space-x-4">
-            <div className="h-16 w-16 bg-white rounded-full shadow-lg flex items-center justify-center">
-              <span className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-yellow-400 bg-clip-text text-transparent">
-                {user.name?.[0]?.toUpperCase() || 'U'}
+          <div className="bg-gradient-to-r from-gray-700 to-gray-900 p-6 flex items-center space-x-4">
+            <div className="h-16 w-16 bg-gray-100 rounded-full shadow-lg flex items-center justify-center">
+              <span className="text-3xl font-bold text-gray-900">
+                {user.name?.[0]?.toUpperCase() || "U"}
               </span>
             </div>
             <div>
               <h1 className="text-2xl font-bold text-white drop-shadow">{user.name}</h1>
-              <p className="text-yellow-100 italic">🌟 Premium Member</p>
+              <p className="text-gray-400 italic">🌟 Premium Member</p>
             </div>
           </div>
-  
+
           {/* Profile Info & Wallet */}
           <div className="p-6">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {/* Info Block */}
               <div className="space-y-4">
-                {[["👤", "Full Name", user.name], ["📧", "Email Address", user.email], ["📺", "YouTube Handle", user.youtubeHandle]].map(
-                  ([icon, label, value], index) => (
-                    <div key={index} className="flex items-center space-x-3 p-3 bg-white border border-pink-100 rounded-xl shadow-sm">
-                      <span className="text-xl">{icon}</span>
-                      <div>
-                        <p className="text-sm text-gray-700">{label}</p>
-                        <p className="font-medium text-gray-500">{value}</p>
-                      </div>
-                    </div>
-                  )
-                )}
-              </div>
-  
-              {/* Wallet */}
-              <div className="bg-yellow-50 border border-yellow-200 rounded-2xl p-5 shadow-inner">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm text-yellow-600 mb-1">Available Balance</p>
-                    <div className="flex items-baseline space-x-2">
-                      <span className="text-lg">💰</span>
-                      <span className="text-2xl font-bold text-black">{user.coins}</span>
+                {[
+                  ["👤", "Full Name", user.name],
+                  ["📧", "Email Address", user.email],
+                  ["📺", "YouTube Handle", user.youtubeHandle],
+                ].map(([icon, label, value], index) => (
+                  <div
+                    key={index}
+                    className="flex items-center space-x-3 p-3 bg-gray-700 border border-gray-600 rounded-xl shadow-sm"
+                  >
+                    <span className="text-xl">{icon}</span>
+                    <div>
+                      <p className="text-sm text-gray-300">{label}</p>
+                      <p className="font-medium text-gray-100">{value || "—"}</p>
                     </div>
                   </div>
-                  <button className="bg-gradient-to-r from-yellow-400 to-pink-500 text-white px-4 py-2 rounded-xl hover:brightness-110 transition-all shadow-md">
+                ))}
+              </div>
+
+              {/* Wallet */}
+              <div className="bg-gray-700 border border-gray-600 rounded-2xl p-5 shadow-inner">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-gray-300 mb-1">Available Balance</p>
+                    <div className="flex items-baseline space-x-2">
+                      <span className="text-lg">💰</span>
+                      <span className="text-2xl font-bold text-white">{user.coins}</span>
+                    </div>
+                  </div>
+                  <button className="bg-white text-black px-4 py-2 rounded-xl hover:bg-gray-200 transition-all shadow-md font-semibold">
                     Add Coins
                   </button>
                 </div>
               </div>
             </div>
-  
+
             {/* Achievements */}
-            <div className="mt-10 pt-6 border-t border-pink-100">
-              <h3 className="text-xl font-bold mb-4 flex items-center text-pink-700">
+            <div className="mt-10 pt-6 border-t border-gray-600">
+              <h3 className="text-xl font-bold mb-4 flex items-center text-white">
                 <span className="text-2xl mr-2">⭐</span>
                 Achievements
               </h3>
@@ -73,9 +77,12 @@ export default function ProfileClient({ user }: { user: User }) {
                   ["12", "Active Days"],
                   ["3", "Badges Earned"],
                 ].map(([value, label], idx) => (
-                  <div key={idx} className="text-center p-4 bg-white rounded-xl shadow-sm border border-pink-100">
-                    <div className="text-2xl font-bold text-pink-600">{value}</div>
-                    <div className="text-sm text-gray-500">{label}</div>
+                  <div
+                    key={idx}
+                    className="text-center p-4 bg-gray-700 rounded-xl shadow-sm border border-gray-600"
+                  >
+                    <div className="text-2xl font-bold text-white">{value}</div>
+                    <div className="text-sm text-gray-300">{label}</div>
                   </div>
                 ))}
               </div>
@@ -84,5 +91,5 @@ export default function ProfileClient({ user }: { user: User }) {
         </div>
       </div>
     </div>
-  );  
+  );
 }