diff --git a/public/images/logo-tcg-love.png b/public/images/logo-tcg-love.png
new file mode 100644
index 0000000..54ab053
Binary files /dev/null and b/public/images/logo-tcg-love.png differ
diff --git a/src/app/admin/AdminClient.tsx b/src/app/admin/AdminClient.tsx
index 42c8212..9125a75 100644
--- a/src/app/admin/AdminClient.tsx
+++ b/src/app/admin/AdminClient.tsx
@@ -37,81 +37,85 @@ export default function AdminClient({ email }: AdminClientProps) {
     };
 
     return (
-        <div className="min-h-screen bg-white text-black py-12 px-4 sm:px-6 lg:px-8">
-            <div className="max-w-3xl mx-auto space-y-8">
-            <h1 className="text-3xl font-bold">Admin Page</h1>
-            <p>Welcome, {email}!</p>
-
+        <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="p-4 text-white bg-gray-800 shadow rounded">
-                <h2 className="text-xl font-semibold">Create Giveaway</h2>
+            <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="Title"
-                    value={giveaway.title}
-                    onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
-                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
+                  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="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
+                  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="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
+                  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="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
+                  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="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
+                  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="mt-4 bg-blue-600 text-white px-4 py-2 rounded"
-                    >
-                    Create Giveaway
-                </button>
-            </div>
-
-            {/* Update User Coins Form */}
-            <div className="p-4 text-white bg-gray-800 shadow rounded">
-                <h2 className="text-xl font-semibold">Update User Coins</h2>
-                <input
-                    type="text"
-                    placeholder="YouTube Video URL"
-                    value={youtube_url}
-                    onChange={(e) => setYoutubeUrl(e.target.value)}
-                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
-                />
-                <input
-                    type="number"
-                    placeholder="Coins"
-                    value={coin_value}
-                    onChange={(e) => setCoinValue(Number(e.target.value))}
-                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
-                />
-                <button
-                    onClick={() => handleUpdateCoins(youtube_url, coin_value)} 
-                    className="mt-4 bg-green-600 text-white px-4 py-2 rounded"
+                  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"
                 >
-                    Update Coins
+                  🚀 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>
+          </div>
         </div>
-    );
-}
\ No newline at end of file
+      );
+}      
\ No newline at end of file
diff --git a/src/app/giveaways/page.tsx b/src/app/giveaways/page.tsx
index 7551f7e..54e832b 100644
--- a/src/app/giveaways/page.tsx
+++ b/src/app/giveaways/page.tsx
@@ -23,37 +23,51 @@ export default async function GiveawaysPage() {
   });
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <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="max-w-7xl mx-auto">
-      <h1 className="text-3xl font-bold text-gray-800 mb-8">Active Giveaways</h1>
-      <div className="text-black grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {giveaways.map((giveaway) => {
-          const remainingTime = Math.max(
-            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)
-          );
-
-          const minutes = Math.floor(
-            (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
-          );
-
-          return (
-            <GiveawayCard
-              key={giveaway.id}
-              title={giveaway.title}
-              description={`${giveaway.description} - Ends in: ${days}d ${hours}h ${minutes}m`}
-              imageUrl={giveaway.prize} // Assuming prize is a URL to an image
-            />
-          );
-        })}
-      </div>
+        {/* Header */}
+        <h1 className="text-4xl sm:text-5xl font-bold mb-10 text-center bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent drop-shadow-md">
+          🎁 Active Giveaways
+        </h1>
+  
+        {/* Grid of Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 text-black">
+          {giveaways.map((giveaway) => {
+            const remainingTime = Math.max(
+              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)
+            );
+            const minutes = Math.floor(
+              (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`;
+  
+            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
+                  title={giveaway.title}
+                  description={`${giveaway.description} — 🕒 ${countdownText}`}
+                  imageUrl={giveaway.prize}
+                />
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}  
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4ba63ea..dd6d034 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,7 +7,7 @@ export default function GiveawaySystem() {
         {/* Header */}
         <div className="text-center mb-16">
           <Image
-            src="/logo-tcg-love.png"
+            src="/images/logo-tcg-love.png"
             alt="TCG Love Openings Logo"
             width={120}
             height={120}
diff --git a/src/app/profile/ProfileClient.tsx b/src/app/profile/ProfileClient.tsx
index a6cb78e..49bb5d9 100644
--- a/src/app/profile/ProfileClient.tsx
+++ b/src/app/profile/ProfileClient.tsx
@@ -10,90 +10,79 @@ interface User {
 export default function ProfileClient({ user }: { user: User }) {
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <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="max-w-3xl mx-auto">
-        <div className="bg-black rounded-2xl shadow-xl overflow-hidden">
-          <div className="bg-gradient-to-r from-purple-600 to-blue-500 p-6">
-            <div className="flex items-center space-x-4">
-              <div className="h-16 w-16 bg-white rounded-full flex items-center justify-center">
-                <span className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
-                  {user.name?.[0]?.toUpperCase() || 'U'}
-                </span>
-              </div>
-              <div>
-                <h1 className="text-2xl font-bold text-white">{user.name}</h1>
-                <p className="text-purple-100">🌟 Premium Member</p>
-              </div>
+        <div className="rounded-3xl shadow-xl overflow-hidden bg-white border-4 border-pink-200">
+          {/* 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'}
+              </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>
             </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">
-                <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
-                  <span className="text-lg">👤</span>
-                  <div>
-                    <p className="text-sm text-black">Full Name</p>
-                    <p className="font-medium text-gray-500">{user.name}</p>
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
-                  <span className="text-lg">📧</span>
-                  <div>
-                    <p className="text-sm text-black">Email Address</p>
-                    <p className="font-medium text-gray-500">{user.email}</p>
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
-                  <span className="text-lg">📺</span>
-                  <div>
-                    <p className="text-sm text-black">YouTube Handle</p>
-                    <p className="font-medium text-gray-500">{user.youtubeHandle}</p>
-                  </div>
-                </div>
+                {[["👤", "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>
-
-              <div className="bg-purple-50 rounded-xl p-5">
+  
+              {/* 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-purple-600 mb-1">Available Balance</p>
+                    <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>
                     </div>
                   </div>
-                  <button className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
+                  <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">
                     Add Coins
                   </button>
                 </div>
               </div>
             </div>
-
-            <div className="mt-8 border-t border-gray-100 pt-6">
-              <h3 className="text-lg font-semibold mb-4 flex items-center">
-                <span className="text-xl mr-2">⭐</span>
+  
+            {/* 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">
+                <span className="text-2xl mr-2">⭐</span>
                 Achievements
               </h3>
               <div className="grid grid-cols-3 gap-4">
-                <div className="text-center p-4 bg-gray-50 rounded-lg">
-                  <div className="text-2xl font-bold text-purple-600">5</div>
-                  <div className="text-sm text-gray-500">Completed Tasks</div>
-                </div>
-                <div className="text-center p-4 bg-gray-50 rounded-lg">
-                  <div className="text-2xl font-bold text-purple-600">12</div>
-                  <div className="text-sm text-gray-500">Active Days</div>
-                </div>
-                <div className="text-center p-4 bg-gray-50 rounded-lg">
-                  <div className="text-2xl font-bold text-purple-600">3</div>
-                  <div className="text-sm text-gray-500">Badges Earned</div>
-                </div>
+                {[
+                  ["5", "Completed Tasks"],
+                  ["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>
+                ))}
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  );
+  );  
 }