diff --git a/src/app/Components/Pages/Contact.razor b/src/app/Components/Pages/Contact.razor
index de54e5c..6e309b1 100644
--- a/src/app/Components/Pages/Contact.razor
+++ b/src/app/Components/Pages/Contact.razor
@@ -236,30 +236,77 @@
                 </div>
 
                 <!-- Social Links -->
-                <div class="mt-8 p-6 bg-gray-50 rounded-lg">
-                    <h3 class="heading heading-4 mb-4">Connect With Us</h3>
+                <div class="mt-8 p-6 bg-gradient-to-br from-primary to-secondary rounded-xl shadow-lg">
+                    <h3 class="heading heading-4 mb-2 text-white">Connect With Us</h3>
+                    <p class="text-white text-opacity-90 text-sm mb-6">Join our vibrant community on your favorite platform</p>
+                    
                     <div class="space-y-3">
-                        <a href="https://discord.gg/npkCMRgqdm" target="_blank" class="flex items-center gap-3 text-gray-700 hover:text-primary transition-colors">
-                            <i class="fa-brands fa-discord text-xl w-6"></i>
-                            <span>Join our Discord</span>
+                        <a href="https://discord.gg/npkCMRgqdm" target="_blank" 
+                           class="flex items-center gap-3 bg-white bg-opacity-10 hover:bg-opacity-20 text-white p-4 rounded-lg transition-all group backdrop-blur-sm">
+                            <div class="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                                <i class="fa-brands fa-discord text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-semibold">Discord Community</div>
+                                <div class="text-sm text-white text-opacity-80">Join our Discord server</div>
+                            </div>
+                            <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                         </a>
-                        <a href="https://www.linkedin.com/company/dotnetcameroon" target="_blank" class="flex items-center gap-3 text-gray-700 hover:text-primary transition-colors">
-                            <i class="fa-brands fa-linkedin text-xl w-6"></i>
-                            <span>Follow on LinkedIn</span>
+
+                        <a href="https://www.linkedin.com/company/dotnetcameroon" target="_blank" 
+                           class="flex items-center gap-3 bg-white bg-opacity-10 hover:bg-opacity-20 text-white p-4 rounded-lg transition-all group backdrop-blur-sm">
+                            <div class="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                                <i class="fa-brands fa-linkedin text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-semibold">LinkedIn</div>
+                                <div class="text-sm text-white text-opacity-80">Follow our company page</div>
+                            </div>
+                            <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                         </a>
-                        <a href="https://github.com/dotnetcameroon" target="_blank" class="flex items-center gap-3 text-gray-700 hover:text-primary transition-colors">
-                            <i class="fa-brands fa-github text-xl w-6"></i>
-                            <span>Check our GitHub</span>
+
+                        <a href="https://github.com/dotnetcameroon" target="_blank" 
+                           class="flex items-center gap-3 bg-white bg-opacity-10 hover:bg-opacity-20 text-white p-4 rounded-lg transition-all group backdrop-blur-sm">
+                            <div class="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                                <i class="fa-brands fa-github text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-semibold">GitHub</div>
+                                <div class="text-sm text-white text-opacity-80">Check our open source projects</div>
+                            </div>
+                            <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                         </a>
-                        <a href="https://chat.whatsapp.com/KlBkiJX85Y8KFS28tIm1UU" target="_blank" class="flex items-center gap-3 text-gray-700 hover:text-primary transition-colors">
-                            <i class="fa-brands fa-whatsapp text-xl w-6"></i>
-                            <span>Join WhatsApp Group</span>
+
+                        <a href="https://chat.whatsapp.com/KlBkiJX85Y8KFS28tIm1UU" target="_blank" 
+                           class="flex items-center gap-3 bg-white bg-opacity-10 hover:bg-opacity-20 text-white p-4 rounded-lg transition-all group backdrop-blur-sm">
+                            <div class="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                                <i class="fa-brands fa-whatsapp text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-semibold">WhatsApp</div>
+                                <div class="text-sm text-white text-opacity-80">Join our WhatsApp group</div>
+                            </div>
+                            <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                         </a>
-                        <a href="https://t.me/+cjXkPqigrZNkNDE0" target="_blank" class="flex items-center gap-3 text-gray-700 hover:text-primary transition-colors">
-                            <i class="fa-brands fa-telegram text-xl w-6"></i>
-                            <span>Join Telegram Channel</span>
+
+                        <a href="https://t.me/+cjXkPqigrZNkNDE0" target="_blank" 
+                           class="flex items-center gap-3 bg-white bg-opacity-10 hover:bg-opacity-20 text-white p-4 rounded-lg transition-all group backdrop-blur-sm">
+                            <div class="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                                <i class="fa-brands fa-telegram text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-semibold">Telegram</div>
+                                <div class="text-sm text-white text-opacity-80">Join our Telegram channel</div>
+                            </div>
+                            <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                         </a>
                     </div>
+
+                    <div class="mt-6 pt-6 border-t border-white border-opacity-20 text-center">
+                        <p class="text-white text-opacity-90 text-sm">
+                            <i class="fa-solid fa-users"></i> Join <span class="font-bold">600+</span> developers in our community
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>