diff --git a/packages/nulp_elite/src/components/filter.js b/packages/nulp_elite/src/components/filter.js
index c023cbf4..301eed17 100644
--- a/packages/nulp_elite/src/components/filter.js
+++ b/packages/nulp_elite/src/components/filter.js
@@ -2,15 +2,23 @@ import React from "react";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
 
-export default function Filter({}) {
+const Filter = ({ options, label, onChange }) => {
+  const handleFilterChange = (event, selectedValues) => {
+    onChange(selectedValues);
+  };
+
   return (
     <Autocomplete
+      multiple
       disablePortal
       id="combo-box-demo"
+      options={options}
       sx={{ width: "100%", background: "#fff" }}
-      renderInput={(params) => (
-        <TextField {...params} label="Filter by Designation" />
-      )}
+      onChange={handleFilterChange}
+      renderInput={(params) => <TextField {...params} label={label} />}
     />
   );
-}
+};
+
+export default Filter;
+
diff --git a/packages/nulp_elite/src/pages/search/ContentList.js b/packages/nulp_elite/src/pages/search/ContentList.js
index 02567e5a..282507eb 100644
--- a/packages/nulp_elite/src/pages/search/ContentList.js
+++ b/packages/nulp_elite/src/pages/search/ContentList.js
@@ -1,21 +1,17 @@
-// Profile.js
-
 import React, { useState, useEffect } from "react";
 import URLSConfig from "../../configs/urlConfig.json";
-import { Link, useParams,useNavigate,useLocation } from "react-router-dom";
+import { Link, useParams, useNavigate, useLocation } from "react-router-dom";
 import BoxCard from "components/Card";
-import Box from '@mui/material/Box';
+import Box from "@mui/material/Box";
 import Search from "components/search";
-import Filter from "components/filter"; 
-import contentData from "../../assets/contentSerach.json"
-import Grid from '@mui/material/Grid';
-import Footer from "components/Footer"; 
-import Header from "components/header"; 
-import Container from '@mui/material/Container';
+import Filter from "components/filter";
+import contentData from "../../assets/contentSerach.json";
+import Grid from "@mui/material/Grid";
+import Footer from "components/Footer";
+import Header from "components/header";
+import Container from "@mui/material/Container";
 import { contentService } from "@shiksha/common-lib";
 
-
-
 const ContentList = (props) => {
   const [search, setSearch] = React.useState(true);
   const [searchState, setSearchState] = React.useState(false);
@@ -27,20 +23,27 @@ const ContentList = (props) => {
   const [filters, setFilters] = useState({});
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [gradeLevels, setGradeLevels] = useState([]);
   const navigate = useNavigate();
   const location = useLocation();
   const { domain } = location.state || {};
 
-  // Example of API Call   
-  useEffect(() => {  
+  // Example of API Call
+  useEffect(() => {
     fetchData();
+    fetchGradeLevels(); // Fetch grade levels when component mounts
   }, [filters]);
 
+  const handleFilterChange = (selectedOptions) => {
+    const selectedValues = selectedOptions.map((option) => option.value);
+    setFilters({ ...filters, se_gradeleverl: selectedValues });
+  };
+
   const fetchData = async () => {
     setIsLoading(true);
     setError(null);
     // Filters for API
-    let data = JSON.stringify({
+    let requestData = {
       request: {
         filters: {
           status: ["Live"],
@@ -58,14 +61,18 @@ const ContentList = (props) => {
             "eTextBook",
             "TVLesson",
           ],
-          se_boards: [domain]
+          se_boards: [domain],
+          se_gradeLevels: filters.se_gradeleverl, // Access selected grade levels from filters state
         },
         offset: null,
         sort_by: {
           lastUpdatedOn: "desc",
         },
       },
-    });
+    };
+
+    // Convert request data to JSON string
+    let data = JSON.stringify(requestData);
 
     // Headers
     const headers = {
@@ -74,16 +81,11 @@ const ContentList = (props) => {
 
     const url = `http://localhost:3000/content/${URLSConfig.URLS.CONTENT.SEARCH}?orgdetails=orgName,email`;
     try {
-      const response = await contentService.getAllContents(
-        url,
-        data,
-        headers
-      );
+      const response = await contentService.getAllContents(url, data, headers);
       console.log(response.data.result);
       setData(response.data.result);
     } catch (error) {
-      console.log("error---",error);
-
+      console.log("error---", error);
       setError(error.message);
     } finally {
       console.log("finally---");
@@ -91,36 +93,100 @@ const ContentList = (props) => {
     }
   };
 
+  const fetchGradeLevels = async () => {
+    try {
+      const response = await fetch(
+        "http://localhost:3000/api/framework/v1/read/nulp?categories=gradeLevel"
+      );
+      const data = await response.json();
+      if (
+        data.result &&
+        data.result.framework &&
+        data.result.framework.categories
+      ) {
+        const gradeLevelCategory = data.result.framework.categories.find(
+          (category) => category.identifier === "nulp_gradelevel"
+        );
+        if (gradeLevelCategory && gradeLevelCategory.terms) {
+          const gradeLevelsOptions = gradeLevelCategory.terms.map((term) => ({
+            value: term.code,
+            label: term.name,
+          }));
+          setGradeLevels(gradeLevelsOptions);
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching grade levels:", error);
+    }
+  };
 
   return (
     <div>
-      <Header/>
-      <Box sx={{background:'#2D2D2D',padding:'20px'}}>
-        <p style={{fontSize:'20px',fontWeight:'700',color:'#fff',paddingBottom:'5px',margin:'0'}}>Explore content related to your domain.Learn from well curated courses and content.</p>
-        <p style={{fontSize:'16px',fontWeight:'700',color:'#C1C1C1',margin:'0',paddingBottom:'30px'}}>Learn from well curated courses and content.</p>
+      <Header />
+      <Box sx={{ background: "#2D2D2D", padding: "20px" }}>
+        <p
+          style={{
+            fontSize: "20px",
+            fontWeight: "700",
+            color: "#fff",
+            paddingBottom: "5px",
+            margin: "0",
+          }}
+        >
+          Explore content related to your domain.
Learn from well curated
+          courses and content.
+        </p>
+        <p
+          style={{
+            fontSize: "16px",
+            fontWeight: "700",
+            color: "#C1C1C1",
+            margin: "0",
+            paddingBottom: "30px",
+          }}
+        >
+          Learn from well curated courses and content.
+        </p>
         <Search></Search>
       </Box>
 
       <Container maxWidth="xxl" role="main" className="container-pb">
-        <domainCarousel></domainCarousel>
-        <Box style={{margin:'20px 0'}}>
-          <Filter/>
+        <Box style={{ margin: "20px 0" }}>
+           <domainCarousel></domainCarousel>
+          <Filter
+            options={gradeLevels}
+            label="Filter by Grade Level"
+            onChange={handleFilterChange}
+          />
         </Box>
 
         <Box textAlign="center" padding="10">
-          <Box sx={{paddingTop:'30px'}}>
-            <Grid container spacing={2} style={{margin:'20px 0', marginBottom:'10px'}}>
-              {data && data.content && data.content.map((items) => (
-                <Grid item xs={12} md={6} lg={3}  style={{marginBottom:'10px'}}>
-                  <BoxCard items ={items}></BoxCard>
-                </Grid>
-              ))}
+          <Box sx={{ paddingTop: "30px" }}>
+            <Grid
+              container
+              spacing={2}
+              style={{ margin: "20px 0", marginBottom: "10px" }}
+            >
+              {data &&
+                data.content &&
+                data.content.map((items) => (
+                  <Grid
+                    item
+                    xs={12}
+                    md={6}
+                    lg={3}
+                    style={{ marginBottom: "10px" }}
+                  >
+                    <BoxCard items={items}></BoxCard>
+                  </Grid>
+                ))}
             </Grid>
           </Box>
         </Box>
       </Container>
-      <Footer/>
+      <Footer />
     </div>
   );
 };
 export default ContentList;
+
diff --git a/packages/nulp_elite/src/services/contentService.js b/packages/nulp_elite/src/services/contentService.js
index 06a4a8e8..a8b0e338 100644
--- a/packages/nulp_elite/src/services/contentService.js
+++ b/packages/nulp_elite/src/services/contentService.js
@@ -12,7 +12,7 @@ export const getAllContents = async (url, filters = {}, header = {}) => {
 };
 // Get  one content
 
-export const getOne = async (url, header = {}) => {
+const getOne = async (url, header = {}) => {
   const result = await get(url, {
     header,
   });
@@ -34,3 +34,6 @@ export const update = async (data = {}, headers = {}) => {
     return {};
   }
 };
+
+export default update;
+