diff --git a/src/components/donate/DonorWall.tsx b/src/components/donate/DonorWall.tsx
index 9c7140f1..98645978 100644
--- a/src/components/donate/DonorWall.tsx
+++ b/src/components/donate/DonorWall.tsx
@@ -5,7 +5,7 @@ interface Donor {
   name: string;
   amount: number;
   message?: string;
-  date: string;
+  date: string; // Consider using a Date object for better date handling
 }
 
 interface DonorWallProps {
@@ -14,28 +14,35 @@ interface DonorWallProps {
 
 export function DonorWall({ donors }: DonorWallProps) {
   return (
-    <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg">
-      <h2 className="text-2xl font-semibold text-gray-900 mb-6">Recent Supporters</h2>
+    <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-md">
+      <h2 className="text-2xl font-semibold text-gray-900 mb-6" id="donor-wall-title">
+        Recent Supporters
+      </h2>
       
-      <div className="space-y-6">
+      <div className="space-y-6" role="list" aria-labelledby="donor-wall-title">
         {donors.map((donor, index) => (
           <motion.div
             key={`${donor.name}-${donor.date}`}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }} // Add exit animation
             transition={{ delay: index * 0.1 }}
-            className="flex items-start gap-4"
+            className="flex items-start gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
+            role="listitem"
+            aria-label={`Donation by ${donor.name} of $${donor.amount} on ${donor.date}`}
           >
-            <Heart className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
+            <Heart className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" aria-hidden="true" />
             <div>
               <div className="flex items-center gap-2">
                 <h3 className="font-medium text-gray-900">{donor.name}</h3>
-                <span className="text-sm text-cornflower-blue">${donor.amount}</span>
+                <span className="text-sm text-cornflower-blue">${donor.amount.toFixed(2)}</span>
               </div>
               {donor.message && (
                 <p className="mt-1 text-sm text-gray-600">{donor.message}</p>
               )}
-              <time className="text-xs text-gray-500">{donor.date}</time>
+              <time className="text-xs text-gray-500" dateTime={donor.date}>
+                {new Date(donor.date).toLocaleDateString()} {/* Format date for better readability */}
+              </time>
             </div>
           </motion.div>
         ))}
diff --git a/src/components/donate/KeySponsors.tsx b/src/components/donate/KeySponsors.tsx
index cce34375..f2884683 100644
--- a/src/components/donate/KeySponsors.tsx
+++ b/src/components/donate/KeySponsors.tsx
@@ -4,40 +4,40 @@ import { motion } from 'framer-motion';
 // Dummy list of sponsors with GitHub usernames
 const keySponsors = [
   {
-    username: 'TIAsCode', // GitHub username
+    username: 'TIAsCode',
     description: 'Enterprise Partner & Server Provider',
-    amount: '₹82,025.36', // Example of amount, could be fetched or hardcoded
+    amount: '₹82,025.36',
   },
   {
-    username: 'ixintl', // GitHub username
+    username: 'ixintl',
     description: 'Strategic Development Partner',
-    amount: '₹54,399.36', // Example of amount, could be fetched or hardcoded
+    amount: '₹54,399.36',
   },
   {
-    username: 'SkullSync', // GitHub username
+    username: 'SkullSync',
     description: 'Strategic Development Partner',
-    amount: '₹12,181.36', // Example of amount, could be fetched or hardcoded
+    amount: '₹12,181.36',
   },
 ];
 
 // Dummy list of individual donors with GitHub usernames
 const individualDonors = [
   {
-    username: 'd3v1l0n', // GitHub username
-    amount: '₹4,183.00', // Example of donation amount
+    username: 'd3v1l0n',
+    amount: '₹4,183.00',
   },
   {
-    username: 'myself-meghna', // GitHub username
-    amount: '₹8,554', // Example of donation amount
+    username: 'myself-meghna',
+    amount: '₹8,554',
   },
   {
-    username: 'lawrencecracker', // GitHub username
-    amount: '₹3,220', // Example of donation amount
+    username: 'lawrencecracker',
+    amount: '₹3,220',
   },
 ];
 
 // Fetch GitHub user data
-async function fetchGitHubUser(username: string) {
+async function fetchGitHubUser (username: string) {
   const response = await fetch(`https://api.github.com/users/${username}`);
   const data = await response.json();
   return data;
@@ -46,44 +46,49 @@ async function fetchGitHubUser(username: string) {
 export function KeySponsors() {
   const [sponsorsData, setSponsorsData] = useState<any[]>([]);
   const [donorsData, setDonorsData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
 
   // Fetch sponsor and donor data from GitHub
   useEffect(() => {
     const fetchSponsorsAndDonorsData = async () => {
-      // Fetching data for sponsors
+      setLoading(true);
       const sponsorsWithData = await Promise.all(
         keySponsors.map(async (sponsor) => {
-          const user = await fetchGitHubUser(sponsor.username);
+          const user = await fetchGitHubUser (sponsor.username);
           return {
             ...sponsor,
             name: user.name || sponsor.username,
-            avatar_url: user.avatar_url, // Fetch GitHub profile picture
+            avatar_url: user.avatar_url,
           };
         })
       );
       setSponsorsData(sponsorsWithData);
 
-      // Fetching data for donors
       const donorsWithData = await Promise.all(
         individualDonors.map(async (donor) => {
-          const user = await fetchGitHubUser(donor.username);
+          const user = await fetchGitHubUser (donor.username);
           return {
             ...donor,
             name: user.name || donor.username,
-            avatar_url: user.avatar_url, // Fetch GitHub profile picture
+            avatar_url: user.avatar_url,
           };
         })
       );
       setDonorsData(donorsWithData);
+      setLoading(false);
     };
 
     fetchSponsorsAndDonorsData();
   }, []);
 
+  if (loading) {
+    return <div className="text-center text-gray-600">Loading...</div>;
+  }
+
   return (
     <div className="space-y-16">
       {/* Key Sponsors Section */}
-      <div className="bg-gradient-to-r from-cornflower-blue/5 to-blue-50/50 rounded-2xl p-8">
+      <div className="bg-gradient-to-r from-cornflower-blue/5 to-blue-50/50 rounded-2xl p-8 shadow-lg">
         <h2 className="text-3xl font-semibold text-gray-900 text-center mb-8">
           Key Sponsors
         </h2>
@@ -94,15 +99,14 @@ export function KeySponsors() {
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ delay: index * 0.1 }}
-              className="bg-white/90 backdrop-blur-sm rounded-xl p-6 border border-cornflower-blue/20 shadow-xl hover:shadow-2xl transition-shadow"
+              className="bg-white rounded-xl p-6 border border-cornflower-blue/20 shadow-lg hover:shadow-2xl transition-shadow duration-300"
             >
               <div className="flex items-center gap-6">
                 <div className="p-4 bg-cornflower-blue/10 rounded-lg shadow-sm">
-                  {/* Displaying the profile picture */}
                   <img 
                     src={sponsor.avatar_url} 
                     alt={sponsor.name} 
-                    className="h-10 w-10 rounded-full object-cover" 
+                    className="h-12 w-12 rounded-full object-cover" 
                   />
                 </div>
                 <div>
@@ -119,7 +123,7 @@ export function KeySponsors() {
       </div>
 
       {/* Individual Donors Section */}
-      <div className="bg-gradient-to-r from-indigo-100/10 to-blue-50/50 rounded-2xl p-8">
+      <div className="bg-gradient-to-r from-indigo-100/10 to-blue-50/50 rounded-2xl p-8 shadow-lg">
         <h2 className="text-3xl font-semibold text-gray-900 text-center mb-8">
           Individual Donors
         </h2>
@@ -130,15 +134,14 @@ export function KeySponsors() {
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ delay: index * 0.1 }}
-              className="bg-white/90 backdrop-blur-sm rounded-xl p-6 border border-indigo-200/50 shadow-md hover:shadow-lg transition-shadow"
+              className="bg-white rounded-xl p-6 border border-indigo-200/50 shadow-md hover:shadow-lg transition-shadow duration-300"
             >
               <div className="flex items-center gap-6">
                 <div className="p-4 bg-indigo-200/10 rounded-lg shadow-sm">
-                  {/* Displaying the profile picture */}
                   <img 
                     src={donor.avatar_url} 
                     alt={donor.name} 
-                    className="h-10 w-10 rounded-full object-cover" 
+                    className="h-12 w-12 rounded-full object-cover" 
                   />
                 </div>
                 <div>
@@ -155,4 +158,4 @@ export function KeySponsors() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file