diff --git a/src/pages/Developers.tsx b/src/pages/Developers.tsx
index c75f24fb..65d907e7 100644
--- a/src/pages/Developers.tsx
+++ b/src/pages/Developers.tsx
@@ -33,26 +33,31 @@ export default function Developers() {
   if (isError) {
     return (
       <div className="min-h-[50vh] flex items-center justify-center">
-        <p className="text-red-500">Failed to load data</p>
+        <p className="text-red-500 text-lg font-semibold">
+          Oops! Something went wrong. Please try again later.
+        </p>
       </div>
     );
   }
 
   return (
-    <div className="py-12 bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div className="py-16 bg-gradient-to-b from-gray-50 to-gray-100">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
           className="text-center mb-16"
         >
-          <h1 className="text-4xl font-extrabold text-gray-900">Meet Our Team</h1>
-          <p className="mt-4 text-lg text-gray-600">
-            The amazing developers behind Snigdha OS
+          <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
+            Meet Our Team
+          </h1>
+          <p className="mt-4 text-lg md:text-xl text-gray-600">
+            The talented developers behind <span className="text-cornflower-blue font-semibold">Snigdha OS</span>
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mb-16 justify-center items-center">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
           {queries.map((query, index) => (
             query.data && (
               <motion.div
@@ -60,7 +65,7 @@ export default function Developers() {
                 initial={{ opacity: 0, scale: 0.95 }}
                 animate={{ opacity: 1, scale: 1 }}
                 transition={{ delay: index * 0.2 }}
-                className="flex justify-center items-center"
+                className="bg-white rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-105 transition-all duration-300"
               >
                 <TeamMemberCard
                   user={query.data}
@@ -72,17 +77,23 @@ export default function Developers() {
           ))}
         </div>
 
-
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2 }}
-          className="mt-16 text-center"
+          transition={{ delay: 0.4 }}
+          className="mt-20 text-center"
         >
-          <h2 className="text-3xl font-semibold text-gray-900 mb-8">Our Repositories</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <h2 className="text-3xl md:text-4xl font-semibold text-gray-900 mb-8">
+            Our Repositories
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
             {repos?.map((repo) => (
-              <RepoCard key={repo.id} repo={repo} />
+              <motion.div
+                key={repo.id}
+                className="bg-white rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-105 transition-all duration-300"
+              >
+                <RepoCard repo={repo} />
+              </motion.div>
             ))}
           </div>
         </motion.div>