ui enhance

src/feature/FilterForm.jsx

@@ -67,9 +67,9 @@ const FilterForm = () => {
     <div className="max-w-6xl mx-auto p-4 md:p-6 ">
       <div className="bg-white rounded-lg shadow-sm">
         {/* Header */}
-        <div className="border-b p-4">
-          <Typography variant="h5" className="font-semibold">
-            Filter Options
+        <div className="border-b border-pink-200 p-4 bg-[#fff5ed]">
+          <Typography variant="h5" className="font-semibold text-center">
+           Partner Filter preference
           </Typography>
         </div>
 
@@ -80,8 +80,14 @@ const FilterForm = () => {
             onChange={handleAccordionChange("basic")}
             className="mb-4"
           >
-            <AccordionSummary expandIcon={<ChevronDown />}>
-              <Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
+            <AccordionSummary expandIcon={<ChevronDown />}  
+            sx={{
+    backgroundColor: "#f5fbff", // green-900
+    "&:hover": {
+      backgroundColor: "#fff6f0", // optional hover
+    }
+  }}>
+              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                 Basic Details
               </Typography>
             </AccordionSummary>
@@ -185,8 +191,13 @@ const FilterForm = () => {
             onChange={handleAccordionChange("religious")}
             className="mb-4"
           >
-            <AccordionSummary expandIcon={<ChevronDown />}>
-              <Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
+            <AccordionSummary expandIcon={<ChevronDown />}   sx={{
+    backgroundColor: "#f5fbff", // green-900
+    "&:hover": {
+      backgroundColor: "#fff6f0", // optional hover
+    }
+  }}>
+              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                 Religious Details
               </Typography>
             </AccordionSummary>
@@ -327,9 +338,16 @@ const FilterForm = () => {
             expanded={expandedSections.professional}
             onChange={handleAccordionChange("professional")}
             className="mb-4"
+
+            
           >
-            <AccordionSummary expandIcon={<ChevronDown />}>
-              <Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
+            <AccordionSummary expandIcon={<ChevronDown />}   sx={{
+    backgroundColor: "#f5fbff", // green-900
+    "&:hover": {
+      backgroundColor: "#fff6f0", // optional hover
+    }
+  }}>
+              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                 Professional Details
               </Typography>
             </AccordionSummary>
@@ -410,8 +428,13 @@ const FilterForm = () => {
             onChange={handleAccordionChange("location")}
             className="mb-4"
           >
-            <AccordionSummary expandIcon={<ChevronDown />}>
-              <Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
+            <AccordionSummary expandIcon={<ChevronDown />}  sx={{
+    backgroundColor: "#f5fbff", // green-900
+    "&:hover": {
+      backgroundColor: "#fff6f0", // optional hover
+    }
+  }}>
+              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                 Location Details
               </Typography>
             </AccordionSummary>
@@ -474,8 +497,13 @@ const FilterForm = () => {
             onChange={handleAccordionChange("lifestyle")}
             className="mb-4"
           >
-            <AccordionSummary expandIcon={<ChevronDown />}>
-              <Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
+            <AccordionSummary expandIcon={<ChevronDown />}  sx={{
+    backgroundColor: "#f5fbff", // green-900
+    "&:hover": {
+      backgroundColor: "#fff6f0", // optional hover
+    }
+  }}>
+              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                 Lifestyle Details
               </Typography>
             </AccordionSummary>
@@ -542,8 +570,13 @@ const FilterForm = () => {
             onChange={handleAccordionChange("family")}
             className="mb-4"
           >
-            <AccordionSummary expandIcon={<ChevronDown />}>
-              <Typography className="font-semibold bg-gray-100 -mx-4 -my-2 px-4 py-2 w-full">
+            <AccordionSummary expandIcon={<ChevronDown />}  sx={{
+    backgroundColor: "#f5fbff", // green-900
+    "&:hover": {
+      backgroundColor: "#fff6f0", // optional hover
+    }
+  }}>
+              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                 Family Details
               </Typography>
             </AccordionSummary>

src/feature/FilterModal.jsx

@@ -27,9 +27,9 @@ const FilterModal = () => {
         open={open}
         onClose={handleClose}
         fullWidth
-        maxWidth="lg" // adjust: "sm" | "md" | "lg"
+        maxWidth="md" // adjust: "sm" | "md" | "lg"
       >
-        <DialogTitle>
+        <DialogTitle sx={{background:"#f5fbff"}}>
           <Box display="flex" alignItems="center" justifyContent="space-between">
             <span>Filter Options</span>
             <IconButton onClick={handleClose} aria-label="close">