diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 42c308d5..1768fdaa 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -1,7 +1,8 @@
 {
   "COMMON": {
     "LANGUAGE": "Language",
-    "LOADING": "Loading"
+    "LOADING": "Loading",
+    "ADD_NEW":"Add New"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
@@ -13,12 +14,31 @@
     "FORGOT_PASSWORD": "Forgot Password?",
     "REMEMBER_ME": "Remember Me"
   },
-  "DASHBOARD":
+  "SIDEBAR":
   {
     "HI":"hi",
     "DASHBOARD":"Dashboard",
-    "MANAGE_USER":"Manage Users",
+    "MANAGE_USERS":"Manage Users",
     "COURSE_PLANNER":"Course Planner",
-    "COHORTS":"Cohorts"
+    "COHORTS":"Cohorts",
+   "FACILITATORS": "Facilitators",
+   "LEARNERS":"Learners",
+   "TEAM_LEADERS":"Team Leaders",
+   "CREATE_PLAN":"Create Plan",
+  "VIEW_PLANS":"View Plans"
+  
+  },
+  "FACILITATORS":
+  {
+    "ALL_STATES":"All States",
+  "ALL_DISTRICTS":"All Districts",
+  "ALL_BLOCKS":"All Blocks",
+  "SEARCHBAR_PLACEHOLDER":"Search Facilitators.."
+  },
+  "NAVBAR":
+  {
+     "SEARCHBAR_PLACEHOLDER":"Search course, topic, student, pdf etc.."
+     
   }
+ 
 }
diff --git a/src/components/layouts/FullLayout.tsx b/src/components/layouts/FullLayout.tsx
index a6158692..e8e9e3d2 100644
--- a/src/components/layouts/FullLayout.tsx
+++ b/src/components/layouts/FullLayout.tsx
@@ -13,7 +13,7 @@ import Sidebar from "./sidebar/Sidebar";
 import Footer from "./footer/Footer";
 import * as theme from '../theme/theme';
 import Dashboard from "@/pages/dashboard";
-import profile from "@/pages/profile";
+import Facilitators from "@/pages/Faciliator";
 const MainWrapper = styled("div")(() => ({
   display: "flex",
   minHeight: "100vh",
@@ -38,7 +38,7 @@ type RouteKey = '/' | '/manage-users' | '/course-planner' | '/cohorts';
 
 const componentMapping: Record<RouteKey, React.ComponentType> = {
   "/": Dashboard,
-  "/manage-users": profile,
+  "/manage-users": Facilitators,
   "/course-planner": Dashboard,
   "/cohorts": Dashboard,
 };
diff --git a/src/components/layouts/header/Header.tsx b/src/components/layouts/header/Header.tsx
index c600dd75..01d22565 100644
--- a/src/components/layouts/header/Header.tsx
+++ b/src/components/layouts/header/Header.tsx
@@ -3,11 +3,16 @@ import FeatherIcon from "feather-icons-react";
 import { AppBar, Box, IconButton, Toolbar } from "@mui/material";
 import PropTypes from "prop-types";
 // Dropdown Component
-import SearchDD from "./SearchDD";
-// import ProfileDD from "./ProfileDD";
+import SearchBar from "./SearchBar";
+
+import { useTranslation } from "next-i18next";
 import ProfileDD from "./ProfileDD";
+import { createTheme } from '@mui/material/styles';
 
 const Header = ({ sx, customClass, toggleMobileSidebar, position }:any) => {
+  const { t } = useTranslation();
+  const theme = createTheme();
+
   return (
     <AppBar sx={sx} position={position} elevation={0} className={customClass}>
       <Toolbar>
@@ -28,7 +33,7 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }:any) => {
         {/* ------------------------------------------- */}
         {/* Search Dropdown */}
         {/* ------------------------------------------- */}
-        <SearchDD />
+        <SearchBar placeholder={ t("NAVBAR.SEARCHBAR_PLACEHOLDER")} backgroundColor={theme.palette.background.default}/>
         {/* ------------ End Menu icon ------------- */}
 
         <Box flexGrow={1} />
diff --git a/src/components/layouts/header/ProfileDD.tsx b/src/components/layouts/header/ProfileDD.tsx
index e9c1cfd1..3019bd5a 100644
--- a/src/components/layouts/header/ProfileDD.tsx
+++ b/src/components/layouts/header/ProfileDD.tsx
@@ -49,7 +49,7 @@ const ProfileDD = () => {
           <Box
             sx={{
               display: {
-                xs: "none",
+               // xs: "none",
                 sm: "flex",
               },
               alignItems: "center",
diff --git a/src/components/layouts/header/SearchBar.tsx b/src/components/layouts/header/SearchBar.tsx
new file mode 100644
index 00000000..69488b04
--- /dev/null
+++ b/src/components/layouts/header/SearchBar.tsx
@@ -0,0 +1,120 @@
+// import React, { useState } from "react";
+// import FeatherIcon from "feather-icons-react";
+// import { IconButton, Input, Box, Drawer } from "@mui/material";
+
+// const SearchDD = () => {
+//   // drawer top
+//   const [showDrawer2, setShowDrawer2] = useState(false);
+
+//   const handleDrawerClose2 = () => {
+//     setShowDrawer2(false);
+//   };
+//   return (
+//     <>
+//       <IconButton
+//         aria-label="show 4 new mails"
+//         color="inherit"
+//         aria-controls="search-menu"
+//         aria-haspopup="true"
+//         onClick={() => setShowDrawer2(true)}
+//         size="large"
+//       >
+//         <FeatherIcon icon="search" width="20" height="20" />
+//       </IconButton>
+//       <Drawer
+//         anchor="top"
+//         open={showDrawer2}
+//         onClose={() => setShowDrawer2(false)}
+//         sx={{
+//           "& .MuiDrawer-paper": {
+//             padding: "15px 30px",
+//           },
+//         }}
+//       >
+//         <Box display="flex" alignItems="center">
+//           <Input placeholder="Search here" aria-label="description" fullWidth />
+//           <Box
+//             sx={{
+//               ml: "auto",
+//             }}
+//           >
+//             <IconButton
+//               color="inherit"
+//               sx={{
+//                 color: (theme) => theme.palette.grey.A200,
+//               }}
+//               onClick={handleDrawerClose2}
+//             >
+//               <FeatherIcon icon="x-circle" />
+//             </IconButton>
+//           </Box>
+//         </Box>
+//       </Drawer>
+//     </>
+//   );
+// };
+
+// export default SearchDD;
+
+
+
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import SearchIcon from '@mui/icons-material/Search';
+
+
+export default function SearchBar({backgroundColor,placeholder}: any ) {
+  const Search = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+   backgroundColor: backgroundColor,
+    '&:hover': {
+    //  backgroundColor: alpha(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+     // marginLeft: theme.spacing(3),
+      width: '50%',
+    },
+  }));
+  
+  const SearchIconWrapper = styled('div')(({ theme }) => ({
+    color: 'black',
+      padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }));
+  
+  const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'black',
+    '& .MuiInputBase-input': {
+      padding: theme.spacing(1, 1, 1, 0),
+      // vertical padding + font size from searchIcon
+      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+      transition: theme.transitions.create('width'),
+      width: '100%',
+      [theme.breakpoints.up('md')]: {
+        width: '100ch',
+      },
+    },
+  }));
+  
+  return (
+    <Search>
+      <SearchIconWrapper>
+        <SearchIcon  />
+      </SearchIconWrapper>
+      <StyledInputBase
+        placeholder={placeholder}
+        inputProps={{ 'aria-label': 'search' }}
+      />
+    </Search>
+  );
+}
diff --git a/src/components/layouts/header/SearchDD.tsx b/src/components/layouts/header/SearchDD.tsx
deleted file mode 100644
index 44fd29e5..00000000
--- a/src/components/layouts/header/SearchDD.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useState } from "react";
-import FeatherIcon from "feather-icons-react";
-import { IconButton, Input, Box, Drawer } from "@mui/material";
-
-const SearchDD = () => {
-  // drawer top
-  const [showDrawer2, setShowDrawer2] = useState(false);
-
-  const handleDrawerClose2 = () => {
-    setShowDrawer2(false);
-  };
-  return (
-    <>
-      <IconButton
-        aria-label="show 4 new mails"
-        color="inherit"
-        aria-controls="search-menu"
-        aria-haspopup="true"
-        onClick={() => setShowDrawer2(true)}
-        size="large"
-      >
-        <FeatherIcon icon="search" width="20" height="20" />
-      </IconButton>
-      <Drawer
-        anchor="top"
-        open={showDrawer2}
-        onClose={() => setShowDrawer2(false)}
-        sx={{
-          "& .MuiDrawer-paper": {
-            padding: "15px 30px",
-          },
-        }}
-      >
-        <Box display="flex" alignItems="center">
-          <Input placeholder="Search here" aria-label="description" fullWidth />
-          <Box
-            sx={{
-              ml: "auto",
-            }}
-          >
-            <IconButton
-              color="inherit"
-              sx={{
-                color: (theme) => theme.palette.grey.A200,
-              }}
-              onClick={handleDrawerClose2}
-            >
-              <FeatherIcon icon="x-circle" />
-            </IconButton>
-          </Box>
-        </Box>
-      </Drawer>
-    </>
-  );
-};
-
-export default SearchDD;
diff --git a/src/components/layouts/sidebar/MenuItems.js b/src/components/layouts/sidebar/MenuItems.js
index efada2f4..7f8d2de3 100644
--- a/src/components/layouts/sidebar/MenuItems.js
+++ b/src/components/layouts/sidebar/MenuItems.js
@@ -1,28 +1,52 @@
 
+import { useTranslation } from "next-i18next";
+
 const Menuitems = [
   {
-    title: "Dashbaord",
+    title: "SIDEBAR.DASHBOARD",
     icon: "home",
     href: "/",
   },
   {
-    title: "Manage Users",
+    title: "SIDEBAR.MANAGE_USERS",
     icon: "user",
     href: "/manage-users",
-    
+    subOptions: [
+      {
+        title: "SIDEBAR.TEAM_LEADERS",
+        href: "/manage-users",
+      },
+      {
+        title: "SIDEBAR.FACILITATORS",
+        href: "/manage-users",
+      },
+      {
+        title: "SIDEBAR.LEARNERS",
+        href: "/manage-users",
+      },
+      
+    ],
   },
   {
-    title: "Course Planner",
+    title: "SIDEBAR.COURSE_PLANNER",
     icon: "calendar",
     href: "/course-planner",
+    subOptions: [
+      {
+        title: "SIDEBAR.CREATE_PLAN",
+        href: "/course-planner",
+      },
+      {
+        title: "SIDEBAR.VIEW_PLANS",
+        href: "/manage-users",
+      },
+    ],
   },
   {
     title: "Cohorts",
     icon: "users",
     href: "/cohorts",
-  }
-  
- 
+  },
 ];
 
 export default Menuitems;
diff --git a/src/components/layouts/sidebar/Sidebar.tsx b/src/components/layouts/sidebar/Sidebar.tsx
index 4a637a50..38e4b361 100644
--- a/src/components/layouts/sidebar/Sidebar.tsx
+++ b/src/components/layouts/sidebar/Sidebar.tsx
@@ -10,63 +10,113 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
-  useTheme
+  useTheme,
+  Collapse
 } from "@mui/material";
 import FeatherIcon from "feather-icons-react";
 import LogoIcon from "../logo/LogoIcon";
 import Menuitems from "./MenuItems";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import { useTranslation } from "next-i18next";
 
 import Buynow from "./Buynow";
 import { useRouter } from "next/router";
 import theme from "@/components/theme/theme";
 const Sidebar = ({ isMobileSidebarOpen, onSidebarClose, isSidebarOpen, onMenuItemClick }:any) => {
   const [open, setOpen] = React.useState(true);
+  const [indexNum, setIndex] = React.useState(0);
+  const { t } = useTranslation();
   const lgUp = useMediaQuery((theme: any) => theme.breakpoints.up("lg"));
+  const [open2, setOpen2] = React.useState<{ [key: number]: boolean }>({});
+
   let curl = useRouter();
   const location = curl.pathname;
+  const handleClick = (index: number) => {
+    setIndex(index);
+    setOpen2((prev) => ({ ...prev, [index]: !prev[index] }));
+  };
 
   const SidebarContent = (
 <Box 
   p={2} 
   height="100%" 
- //backgroundColor={t.palette.primary.light}
   border={1} 
   borderColor="#ccc" 
+  bgcolor={"#F4F4F4"}
 >      <LogoIcon />
-      <Box mt={2}>
+      <Box mt={2}
+      >
         <List>
-          {Menuitems?.map((item, index) => (
+          {Menuitems?.map((item, index: number) => (
             <List component="li" disablePadding key={item.title}>
               <ListItem
                 onClick={() => {
-                  onMenuItemClick(item.href);
+                item.subOptions?null :onMenuItemClick(item.href);
                   onSidebarClose();
+                  handleClick(index);
                 }}
                 button
-                selected={location === item.href}
+                selected={indexNum === index}
                 sx={{
                   mb: 1,
-                  ...(location === item.href && {
-                    color: "white",
+                  ...(indexNum === index && !item.subOptions  &&{
+                    color: "black",
                     backgroundColor: (theme) =>
-                      `${theme.palette.primary.main}!important`,
+                       `${theme.palette.primary.dark}`
+                     // 'red',
                   }),
                 }}
               >
                 <ListItemIcon>
                   <FeatherIcon
-                    style={{
-                      color: `${location === item.href ? "white" : ""} `,
-                    }}
+                    // style={{
+                    //   color: `${location === item.href ? "white" : ""} `,
+                    // }}
                     icon={item.icon}
                     width="20"
                     height="20"
                   />
                 </ListItemIcon>
                 <ListItemText>
-                  {item.title}
+               { t(item.title)}
                 </ListItemText>
+                {item.subOptions ? (
+              open2[index] ? <ExpandMore />:<ExpandLess /> 
+            ) : null}
+
+
+
+
               </ListItem>
+
+              {item.subOptions && (
+            <Collapse in={open2[index]} timeout="auto" unmountOnExit>
+              <List component="div" disablePadding>
+                {item.subOptions.map((subItem) => (
+                  <ListItem
+                    key={subItem.title}
+                    button
+                    onClick={() => {
+                      onMenuItemClick(subItem.href);
+                      onSidebarClose();
+                    }}
+                    selected={location === subItem.href}
+                    sx={{
+                      pl: 4,
+                      ...(location === subItem.href && {
+                        color: "white",
+                        backgroundColor: (theme) =>
+                          `${theme.palette.primary.main}!important`,
+                      }),
+                    }}
+                  >
+                    <ListItemText>  { t(subItem.title)}</ListItemText>
+                  </ListItem>
+                ))}
+              </List>
+            </Collapse>
+          )}
+              
             </List>
           ))}
         </List>
diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts
index ec6d9c37..80a6652f 100644
--- a/src/components/theme/theme.ts
+++ b/src/components/theme/theme.ts
@@ -8,7 +8,7 @@ const theme = createTheme({
   palette: {
     primary: {
       main: "#03c9d7",
-      light: "F4F4F4",
+      light: "#F4F4F4",
       dark: "#05b2bd",
       contrastText: "#ffffff",
 
diff --git a/src/pages/Faciliator.tsx b/src/pages/Faciliator.tsx
new file mode 100644
index 00000000..26e767ae
--- /dev/null
+++ b/src/pages/Faciliator.tsx
@@ -0,0 +1,158 @@
+import * as React from "react";
+import { useState } from "react";
+import {
+  MenuItem,
+  Typography,
+  Box,
+  FormControl,
+  useMediaQuery,
+} from "@mui/material";
+
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import SearchIcon from "@mui/icons-material/Search";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import AddIcon from "@mui/icons-material/Add";
+import SearchBar from "@/components/layouts/header/SearchBar";
+
+import { useTranslation } from "next-i18next";
+
+interface Facilitator {
+  name: string;
+  location: string;
+}
+
+const AllStates = ["maharashtra", "Gujarat"];
+const AllDistrict = ["Kolhapur", "Pune"];
+const AllBlocks = ["Kothrud", "Warje"];
+
+const Facilitators: React.FC = () => {
+  const [selectedState, setSelectedState] = useState("All states");
+  const [selectedDistrict, setSelectedDistrict] = useState("All Districts");
+  const [selectedBlock, setSelectedBlock] = useState("All Blocks");
+  const { t } = useTranslation();
+
+  const isMobile = useMediaQuery("(max-width:600px)");
+
+  const handleStateChange = (event: SelectChangeEvent) => {
+    setSelectedState(event.target.value as string);
+  };
+
+  const handleDistrictChange = (event: SelectChangeEvent) => {
+    setSelectedDistrict(event.target.value as string);
+  };
+
+  const handleBlockChange = (event: SelectChangeEvent) => {
+    setSelectedBlock(event.target.value as string);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: isMobile ? "0.1px" : "16px",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: isMobile ? "column" : "row",
+          gap: isMobile ? "0.1px" : "16px",
+        }}
+      >
+        <FormControl sx={{ m: "1rem 0 1rem" }}>
+          <Select
+            value={selectedState}
+            onChange={handleStateChange}
+            displayEmpty
+            style={{
+              borderRadius: "0.5rem",
+              width: "117px",
+              height: "32px",
+              marginBottom: "0rem",
+              fontSize: "14px",
+            }}
+          >
+            <MenuItem value="All states">
+            {t("FACILITATORS.ALL_STATES")}
+            </MenuItem>
+            {AllStates.map((state, index) => (
+              <MenuItem value={state} key={index}>
+                {state}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl sx={{ m: "1rem 0 1rem" }}>
+          <Select
+            value={selectedDistrict}
+            onChange={handleDistrictChange}
+            displayEmpty
+            style={{
+              borderRadius: "0.5rem",
+              width: "117px",
+              height: "32px",
+              marginBottom: "0rem",
+              fontSize: "14px",
+            }}
+          >
+            <MenuItem value="All Districts">
+            {t("FACILITATORS.ALL_DISTRICTS")}
+            </MenuItem>
+            {AllDistrict.map((state, index) => (
+              <MenuItem value={state} key={index}>
+                {state}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl sx={{ m: "1rem 0 1rem" }}>
+          <Select
+            value={selectedBlock}
+            onChange={handleBlockChange}
+            displayEmpty
+            style={{
+              borderRadius: "0.5rem",
+              width: "117px",
+              height: "32px",
+              marginBottom: "0rem",
+              fontSize: "14px",
+            }}
+          >
+            <MenuItem value="All Blocks">All Blocks</MenuItem>
+            {AllBlocks.map((state, index) => (
+              <MenuItem value={state} key={index}>
+                {state}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Box>
+      <Typography>
+      {t("SIDEBAR.FACILITATORS")}
+
+      </Typography>
+      <SearchBar placeholder={ t("NAVBAR.SEARCHBAR_PLACEHOLDER")} backgroundColor="#EEEEEE" />
+
+      <Box
+        sx={{
+          display: "flex",
+          // flexDirection: isMobile ? "column" : "row",
+          // gap:"px",
+          justifyContent: "center",
+          height: "40px",
+          padding: "0px 16px",
+          alignItems: "center",
+          width: "100px",
+          borderRadius: "20px",
+          border: "1px solid var(--M3-ref-neutral-neutral10, #1E1B16)",
+        }}
+      >
+        <Typography>{t("COMMON.ADD_NEW")}</Typography>
+        <AddIcon />
+      </Box>
+    </Box>
+  );
+};
+
+export default Facilitators;
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index e46f193a..5cf24275 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -57,7 +57,6 @@ const LoginPage = () => {
       setLang(lang);
       const token = localStorage.getItem("token");
       if (token) {
-        console.log("hey")
         router.push('/dashboard');
       }
     }
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
deleted file mode 100644
index e9950ef1..00000000
--- a/src/pages/profile.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-function profile() {
-    return (
-        <h1>Profile</h1>
-    );
-}
-
-export default profile;
\ No newline at end of file