diff --git a/src/Pages/Lost&Found.jsx b/src/Pages/Lost&Found.jsx
index 3d0d76f..60baf9d 100644
--- a/src/Pages/Lost&Found.jsx
+++ b/src/Pages/Lost&Found.jsx
@@ -45,37 +45,37 @@ export default function LostAndFoundPage() {
   });
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-25 via-white to-green-50/30 dark:from-gray-950 dark:via-gray-900 dark:to-green-950/10 relative p-6">
-      {/* Background orbs */}
-      <div className="absolute top-20 right-16 w-72 h-72 bg-green-200/10 dark:bg-green-400/5 rounded-full blur-3xl animate-pulse"></div>
-      <div className="absolute bottom-32 left-20 w-64 h-64 bg-green-300/15 dark:bg-green-500/8 rounded-full blur-3xl animate-pulse delay-1000"></div>
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50 dark:from-emerald-950 dark:via-gray-900 dark:to-green-950 relative py-10 px-4">
+      {/* Decorative background */}
+      <div className="absolute top-20 right-16 w-72 h-72 bg-emerald-200/20 dark:bg-green-400/10 rounded-full blur-3xl pointer-events-none animate-pulse"></div>
+      <div className="absolute bottom-32 left-20 w-60 h-60 bg-emerald-200/15 dark:bg-green-500/8 rounded-full blur-3xl pointer-events-none animate-pulse delay-1000"></div>
 
       <div className="relative z-10 max-w-7xl mx-auto">
         {/* Header */}
-        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10">
           <div>
-            <h1 className="text-4xl font-bold bg-gradient-to-r from-gray-900 via-green-700 to-green-800 dark:from-white dark:via-green-300 dark:to-green-400 bg-clip-text text-transparent mb-2">
+            <h1 className="text-4xl font-extrabold bg-gradient-to-r from-emerald-800 via-green-600 to-teal-500 dark:from-white dark:via-green-300 dark:to-green-400 bg-clip-text text-transparent mb-2 tracking-tight">
               Lost & Found
             </h1>
-            <p className="text-gray-600 dark:text-gray-400">Help reunite people with their belongings</p>
+            <p className="text-green-800/80 dark:text-green-200/80 font-medium">Help reunite people with their belongings</p>
           </div>
           <button
             onClick={() => setShowForm(true)}
-            className="mt-4 sm:mt-0 group flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-medium rounded-xl shadow-lg shadow-green-600/25 hover:shadow-green-700/30 transition-all duration-200 transform hover:scale-105"
+            className="mt-5 sm:mt-0 group flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-semibold rounded-xl shadow-lg hover:shadow-emerald-600/40 transition hover:scale-[1.04]"
           >
-            <Plus className="w-5 h-5 transition-transform group-hover:rotate-90" />
+            <Plus className="w-5 h-5 group-hover:rotate-90 transition" />
             Add Item
           </button>
         </div>
 
         {/* Search & Tabs */}
-        <div className="flex flex-col lg:flex-row gap-4 mb-8">
+        <div className="flex flex-col lg:flex-row gap-4 mb-10">
           <div className="relative flex-1">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-emerald-400 w-5 h-5" />
             <input
               type="text"
               placeholder="Search items by name or description..."
-              className="w-full pl-12 pr-4 py-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-green-200/50 dark:border-green-700/50 rounded-xl text-gray-900 dark:text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 dark:focus:border-green-500 transition-all duration-200 shadow-sm"
+              className="w-full pl-12 pr-4 py-4 bg-white/70 dark:bg-emerald-900/80 backdrop-blur border border-emerald-100/70 dark:border-emerald-900/50 rounded-xl text-emerald-900 dark:text-white placeholder:text-emerald-500 font-medium shadow focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
@@ -89,13 +89,13 @@ export default function LostAndFoundPage() {
               <button
                 key={tab.key}
                 onClick={() => setActiveTab(tab.key)}
-                className={`px-5 py-3 rounded-xl font-medium transition-all duration-200 ${
+                className={`px-5 py-3 rounded-xl font-semibold transition-all duration-200 ${
                   activeTab === tab.key
-                    ? "bg-green-600 text-white shadow-lg shadow-green-600/25"
-                    : "bg-white/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-950/30 border border-green-200/50 dark:border-green-700/50"
+                    ? "bg-gradient-to-r from-emerald-500 to-green-400 text-white shadow-lg"
+                    : "bg-white/80 dark:bg-emerald-900/70 text-emerald-700 dark:text-emerald-200 border border-emerald-100/50 dark:border-emerald-900/20 hover:bg-emerald-50 dark:hover:bg-emerald-900/40"
                 }`}
               >
-                <span className="mr-2">{tab.emoji}</span>
+                <span className="mr-1">{tab.emoji}</span>
                 {tab.label}
               </button>
             ))}
@@ -104,63 +104,62 @@ export default function LostAndFoundPage() {
 
         {/* Items Grid */}
         {filteredItems.length === 0 ? (
-          <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl border border-green-200/50 dark:border-green-700/50 p-16 text-center">
-            <div className="w-20 h-20 bg-green-100 dark:bg-green-900/50 rounded-2xl flex items-center justify-center mx-auto mb-6">
-              <Search className="w-10 h-10 text-green-600 dark:text-green-400" />
+          <div className="bg-white/90 dark:bg-emerald-900/95 rounded-3xl border border-emerald-100/70 dark:border-emerald-900/40 p-16 text-center shadow-lg">
+            <div className="w-20 h-20 bg-emerald-100 dark:bg-emerald-900/70 rounded-2xl flex items-center justify-center mx-auto mb-6">
+              <Search className="w-10 h-10 text-emerald-600 dark:text-emerald-400" />
             </div>
-            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No items found</h3>
-            <p className="text-gray-600 dark:text-gray-400">Be the first to add a lost or found item!</p>
+            <h3 className="text-xl font-bold text-emerald-800 dark:text-emerald-100 mb-1.5">No items found</h3>
+            <p className="text-emerald-700/80 dark:text-emerald-300/80">Be the first to add a lost or found item!</p>
           </div>
         ) : (
-          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
             {filteredItems.map((item) => (
               <div
                 key={item.id}
-                className="group bg-white/90 dark:bg-gray-900/90 backdrop-blur-md rounded-2xl p-6 border border-green-200/50 dark:border-green-700/50 hover:border-green-300 dark:hover:border-green-600 hover:shadow-lg hover:shadow-green-100/20 dark:hover:shadow-green-900/10 transition-all duration-300 hover:-translate-y-1"
+                className="group bg-white/95 dark:bg-emerald-950/80 border border-emerald-100/70 dark:border-emerald-900/50 rounded-2xl p-7 shadow-lg hover:shadow-emerald-100/10 dark:hover:shadow-emerald-900/20 transition hover:-translate-y-1"
               >
-                <div className="flex items-start justify-between mb-4">
-                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
+                <div className="flex items-start justify-between mb-3">
+                  <h3 className="text-lg font-extrabold text-emerald-800 dark:text-emerald-100 group-hover:text-emerald-900 dark:group-hover:text-green-200 transition">
                     {item.name}
                   </h3>
-                  <span className={`px-3 py-1 text-xs font-semibold rounded-full ${
+                  <span className={`px-4 py-1 text-xs font-bold rounded-full ${
                     item.type === "lost"
-                      ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300"
-                      : "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
+                      ? "bg-gradient-to-r from-red-200 to-red-400 text-red-900"
+                      : "bg-gradient-to-r from-green-200 to-green-400 text-emerald-900"
                   }`}>
                     {item.type.toUpperCase()}
                   </span>
                 </div>
-                
-                <p className="text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">{item.description}</p>
-                
-                <div className="space-y-3 text-sm">
-                  <div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
-                    <div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
-                      <MapPin className="w-4 h-4 text-green-600 dark:text-green-400" />
+
+                <p className="text-gray-600 dark:text-emerald-200 mb-4 line-clamp-2">{item.description}</p>
+                <div className="space-y-3 text-xs font-medium">
+                  <div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
+                    <div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
+                      <MapPin className="w-4 h-4" />
                     </div>
                     <span className="truncate">{item.location}</span>
                   </div>
-                  <div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
-                    <div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
-                      <Calendar className="w-4 h-4 text-green-600 dark:text-green-400" />
+                  <div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
+                    <div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
+                      <Calendar className="w-4 h-4" />
                     </div>
                     <span>{item.date}</span>
                   </div>
-                  <div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
-                    <div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
-                      <User className="w-4 h-4 text-green-600 dark:text-green-400" />
+                  <div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
+                    <div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
+                      <User className="w-4 h-4" />
                     </div>
                     <span className="truncate">{item.contactName}</span>
                   </div>
-                  <div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
-                    <div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
-                      <Phone className="w-4 h-4 text-green-600 dark:text-green-400" />
+                  <div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
+                    <div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
+                      <Phone className="w-4 h-4" />
                     </div>
                     <span className="font-mono">{item.contactPhone}</span>
                   </div>
-                  <div className="flex items-center gap-3 text-gray-600 dark:text-gray-400">
-                    <div className="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
-                      <Mail className="w-4 h-4 text-green-600 dark:text-green-400" />
+                  <div className="flex items-center gap-3 text-emerald-700 dark:text-emerald-100">
+                    <div className="w-8 h-8 bg-emerald-50 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
+                      <Mail className="w-4 h-4" />
                     </div>
                     <span className="truncate">{item.contactEmail}</span>
                   </div>
@@ -173,19 +172,18 @@ export default function LostAndFoundPage() {
         {/* Form Modal */}
         {showForm && (
           <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50 p-4">
-            <div className="bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded-3xl shadow-2xl p-8 w-full max-w-md border border-green-200/50 dark:border-green-700/50">
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Add New Item</h2>
+            <div className="bg-white/95 dark:bg-emerald-950/95 backdrop-blur-md rounded-3xl shadow-2xl p-8 w-full max-w-md border border-emerald-100/70 dark:border-emerald-900/40">
+              <div className="flex items-center justify-between mb-7">
+                <h2 className="text-2xl font-bold text-emerald-900 dark:text-white">Add New Item</h2>
                 <button
                   onClick={() => setShowForm(false)}
-                  className="w-10 h-10 bg-gray-100 dark:bg-gray-800 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-xl flex items-center justify-center text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-all duration-200"
+                  className="w-10 h-10 bg-gray-100 dark:bg-emerald-900/80 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-xl flex items-center justify-center text-gray-500 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 transition"
                 >
                   <X className="w-5 h-5" />
                 </button>
               </div>
-              
               <div className="space-y-4">
-                <div className="flex gap-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-xl">
+                <div className="flex gap-4 p-3 bg-emerald-50 dark:bg-green-900/30 rounded-xl">
                   {[
                     { value: "lost", label: "😔 Lost", desc: "I lost something" },
                     { value: "found", label: "🎉 Found", desc: "I found something" }
@@ -201,16 +199,15 @@ export default function LostAndFoundPage() {
                       />
                       <div className={`text-center p-3 rounded-lg border-2 transition-all ${
                         formData.type === option.value
-                          ? "border-green-500 bg-green-100 dark:bg-green-900/50"
-                          : "border-gray-200 dark:border-gray-700 hover:border-green-300"
+                          ? "border-emerald-600 bg-emerald-50 dark:bg-emerald-900/70"
+                          : "border-emerald-100 dark:border-emerald-800 hover:border-emerald-400"
                       }`}>
-                        <div className="font-medium text-sm">{option.label}</div>
-                        <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">{option.desc}</div>
+                        <div className="font-bold text-base">{option.label}</div>
+                        <div className="text-xs text-emerald-500 dark:text-emerald-200">{option.desc}</div>
                       </div>
                     </label>
                   ))}
                 </div>
-
                 {[
                   { key: "name", type: "text", placeholder: "Item Name", required: true },
                   { key: "description", type: "textarea", placeholder: "Description", required: true },
@@ -224,7 +221,7 @@ export default function LostAndFoundPage() {
                     {field.type === "textarea" ? (
                       <textarea
                         placeholder={field.placeholder}
-                        className="w-full p-4 bg-white/80 dark:bg-gray-800/80 border border-green-200/50 dark:border-green-700/50 rounded-xl text-gray-900 dark:text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-200 resize-none h-24"
+                        className="w-full p-4 bg-white/80 dark:bg-emerald-900/60 border border-emerald-100 dark:border-emerald-800 rounded-xl text-emerald-900 dark:text-white placeholder:text-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 transition h-20 resize-none"
                         value={formData[field.key]}
                         onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
                         required={field.required}
@@ -233,7 +230,7 @@ export default function LostAndFoundPage() {
                       <input
                         type={field.type}
                         placeholder={field.placeholder}
-                        className="w-full p-4 bg-white/80 dark:bg-gray-800/80 border border-green-200/50 dark:border-green-700/50 rounded-xl text-gray-900 dark:text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:border-green-400 transition-all duration-200"
+                        className="w-full p-4 bg-white/80 dark:bg-emerald-900/60 border border-emerald-100 dark:border-emerald-800 rounded-xl text-emerald-900 dark:text-white placeholder:text-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 transition"
                         value={formData[field.key]}
                         onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
                         required={field.required}
@@ -241,11 +238,10 @@ export default function LostAndFoundPage() {
                     )}
                   </div>
                 ))}
-
                 <button
                   type="button"
                   onClick={handleSubmit}
-                  className="w-full py-4 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold rounded-xl shadow-lg shadow-green-600/25 hover:shadow-green-700/30 transition-all duration-200 transform hover:scale-105"
+                  className="w-full py-4 mt-2 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-extrabold rounded-xl shadow-lg transition hover:scale-[1.03]"
                 >
                   Submit Item
                 </button>
@@ -256,4 +252,4 @@ export default function LostAndFoundPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}