diff --git a/src/components/layouts/header/SearchBar.tsx b/src/components/layouts/header/SearchBar.tsx
index 2f6e01ee..4e6346d4 100644
--- a/src/components/layouts/header/SearchBar.tsx
+++ b/src/components/layouts/header/SearchBar.tsx
@@ -1,7 +1,8 @@
 import SearchIcon from "@mui/icons-material/Search";
-import { IconButton, InputBase, Paper } from "@mui/material";
+import { IconButton, InputBase, Paper, useMediaQuery } from "@mui/material";
 import { styled } from "@mui/system";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 interface SearchBarProps {
   onSearch: (keyword: string) => void;
@@ -12,8 +13,12 @@ const SearchBox = styled(Paper)(({ theme }) => ({
   padding: "2px 4px",
   display: "flex",
   alignItems: "center",
-  width: 400,
+  width: "100%",
+  maxWidth: 400,
   borderRadius: "8px",
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "100%",
+  },
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
@@ -23,6 +28,10 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 
 const SearchBar: React.FC<SearchBarProps> = ({ onSearch, placeholder }) => {
   const [keyword, setKeyword] = useState("");
+  const { t } = useTranslation();
+  const isSmallScreen = useMediaQuery((theme: any) =>
+    theme.breakpoints.down("sm")
+  );
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.value === "") {
@@ -44,7 +53,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onSearch, placeholder }) => {
   return (
     <SearchBox>
       <StyledInputBase
-        placeholder={placeholder}
+        placeholder={isSmallScreen ? placeholder : t("COURSE_PLANNER.SEARCH")}
         value={keyword}
         onChange={handleInputChange}
         onKeyPress={handleKeyPress}
diff --git a/src/data/cardData.js b/src/data/cardData.js
new file mode 100644
index 00000000..296fe78d
--- /dev/null
+++ b/src/data/cardData.js
@@ -0,0 +1,51 @@
+const cardData = [
+  {
+    id: "1",
+    state: "Andhra Pradesh",
+    boardsUploaded: 1,
+    totalBoards: 3,
+    details:
+      "Andhra Pradesh is a state in the southeastern coastal region of India.",
+    boards: ["AP Board", "NIOS", "ICSE"],
+    subjects: ["Telugu", "English", "Maths"],
+  },
+  {
+    id: "2",
+    state: "Maharashtra",
+    boardsUploaded: 2,
+    totalBoards: 3,
+    details:
+      "Maharashtra is a state in the western peninsular region of India.",
+    boards: ["Maharashtra Board", "CBSE", "ICSE"],
+    subjects: ["Marathi", "English", "Science"],
+  },
+  {
+    id: "3",
+    state: "Karnataka",
+    boardsUploaded: 2,
+    totalBoards: 3,
+    details: "Karnataka is a state in the southwestern region of India.",
+    boards: ["Karnataka Board", "ICSE", "NIOS"],
+    subjects: ["Kannada", "Maths", "Science"],
+  },
+  {
+    id: "4",
+    state: "Tamil Nadu",
+    boardsUploaded: 1,
+    totalBoards: 3,
+    details: "Tamil Nadu is a state in the southern part of India.",
+    boards: ["Tamil Nadu Board", "NIOS", "CBSE"],
+    subjects: ["Tamil", "English", "Social Studies"],
+  },
+  {
+    id: "5",
+    state: "Kerala",
+    boardsUploaded: 2,
+    totalBoards: 2,
+    details: "Kerala is a state on the southwestern Malabar Coast of India.",
+    boards: ["Kerala Board", "ICSE", "CBSE"],
+    subjects: ["Malayalam", "Science", "Maths"],
+  },
+];
+
+export default cardData;
diff --git a/src/pages/district.tsx b/src/pages/district.tsx
index 0e4917e3..9d54f245 100644
--- a/src/pages/district.tsx
+++ b/src/pages/district.tsx
@@ -222,7 +222,7 @@ const District: React.FC = () => {
       </CustomModal>
       <HeaderComponent {...userProps}>
         <Box display="flex" gap={2}>
-          <FormControl variant="outlined" sx={{ minWidth: 220 }}>
+          <FormControl variant="outlined" sx={{ minWidth: 220,marginTop: 2 }}>
             <InputLabel id="state-select-label">{t("MASTER.STATE")}</InputLabel>
             <Select
               labelId="state-select-label"
diff --git a/src/pages/state.tsx b/src/pages/state.tsx
index 51850854..f03d3247 100644
--- a/src/pages/state.tsx
+++ b/src/pages/state.tsx
@@ -1,21 +1,31 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import KaTableComponent from "../components/KaTableComponent";
-import { DataType } from "ka-table/enums";
+import { DataType, SortDirection } from "ka-table/enums";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import HeaderComponent from "@/components/HeaderComponent";
 import Pagination from "@mui/material/Pagination";
 import { SelectChangeEvent } from "@mui/material/Select";
 import PageSizeSelector from "@/components/PageSelector";
 import { useTranslation } from "next-i18next";
-import { getStateBlockDistrictList } from "@/services/MasterDataService";
-import { SortDirection } from "ka-table/enums";
+import {
+  getStateBlockDistrictList,
+  deleteState,
+} from "@/services/MasterDataService";
 import Loader from "@/components/Loader";
-import { Box } from "@mui/material";
-import CustomModal from "@/components/CustomModal";
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Button,
+} from "@mui/material";
 import { transformLabel } from "@/utils/Helper";
 
 type StateDetail = {
   label: string;
+  value: string;
 };
 
 const State: React.FC = () => {
@@ -32,11 +42,9 @@ const State: React.FC = () => {
   const [pageSize, setPageSize] = useState<number>(10);
   const [selectedFilter, setSelectedFilter] = useState<string>("All");
   const [loading, setLoading] = useState<boolean>(true);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
-  const [selectedState, setSelectedState] = useState<StateDetail | null>(null);
-  const [confirmationModalOpen, setConfirmationModalOpen] =
+  const [confirmationDialogOpen, setConfirmationDialogOpen] =
     useState<boolean>(false);
-  const [selectedDistrictForDelete, setSelectedDistrictForDelete] =
+  const [selectedStateForDelete, setSelectedStateForDelete] =
     useState<StateDetail | null>(null);
 
   const columns = useMemo(
@@ -82,13 +90,27 @@ const State: React.FC = () => {
   const handleEdit = useCallback((rowData: any) => {}, []);
 
   const handleDelete = useCallback((rowData: StateDetail) => {
-    setSelectedDistrictForDelete(rowData);
-    setConfirmationModalOpen(true);
+    console.log("delete", rowData);
+    setSelectedStateForDelete(rowData);
+    setConfirmationDialogOpen(true);
   }, []);
 
-  const handleConfirmDelete = useCallback(() => {
-    setConfirmationModalOpen(false);
-  }, [selectedDistrictForDelete]);
+  const handleConfirmDelete = useCallback(async () => {
+    if (selectedStateForDelete) {
+      try {
+        await deleteState(selectedStateForDelete.value);
+        console.log("deleted from api", selectedStateForDelete.value);
+        setStateData((prevStateData) =>
+          prevStateData.filter(
+            (state) => state.value !== selectedStateForDelete.value
+          )
+        );
+      } catch (error) {
+        console.error("Error deleting state", error);
+      }
+    }
+    setConfirmationDialogOpen(false);
+  }, [selectedStateForDelete]);
 
   const handleSearch = (keyword: string) => {};
 
@@ -96,12 +118,7 @@ const State: React.FC = () => {
     const fetchStateData = async () => {
       try {
         setLoading(true);
-        const object = {
-          controllingfieldfk: selectedState,
-
-          fieldName: "districts",
-        };
-        const data = await getStateBlockDistrictList(object);
+        const data = await getStateBlockDistrictList({ fieldName: "states" });
         const sortedData = [...data.result].sort((a, b) => {
           const [field, order] = sortBy;
           return order === "asc"
@@ -153,16 +170,28 @@ const State: React.FC = () => {
 
   return (
     <div>
-      <CustomModal
-        open={confirmationModalOpen}
-        handleClose={() => setConfirmationModalOpen(false)}
-        title={t("COMMON.CONFIRM_DELETE")}
-        primaryBtnText={t("COMMON.DELETE")}
-        secondaryBtnText={t("COMMON.CANCEL")}
-        primaryBtnClick={handleConfirmDelete}
+      <Dialog
+        open={confirmationDialogOpen}
+        onClose={() => setConfirmationDialogOpen(false)}
       >
-        <Box>{t("COMMON.ARE_YOU_SURE_DELETE")}</Box>
-      </CustomModal>
+        <DialogTitle>{t("COMMON.CONFIRM_DELETE")}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {t("COMMON.ARE_YOU_SURE_DELETE")}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => setConfirmationDialogOpen(false)}
+            color="primary"
+          >
+            {t("COMMON.CANCEL")}
+          </Button>
+          <Button onClick={handleConfirmDelete} color="primary" autoFocus>
+            {t("COMMON.DELETE")}
+          </Button>
+        </DialogActions>
+      </Dialog>
 
       <HeaderComponent {...userProps} handleSearch={handleSearch}>
         {loading ? (
@@ -172,6 +201,7 @@ const State: React.FC = () => {
             columns={columns}
             data={stateData.map((stateDetail) => ({
               label: transformLabel(stateDetail.label),
+              value: stateDetail.value,
             }))}
             limit={pageLimit}
             offset={pageOffset}
diff --git a/src/services/MasterDataService.ts b/src/services/MasterDataService.ts
index 399ecd55..fcb1c8b6 100644
--- a/src/services/MasterDataService.ts
+++ b/src/services/MasterDataService.ts
@@ -1,4 +1,4 @@
-import { get, post } from "./RestClient";
+import { deleteApi, get, post } from "./RestClient";
 export interface StateListParam {
   limit?: number;
   //  page: number;
@@ -94,3 +94,17 @@ export const getCenterList = async ({
     return error;
   }
 };
+
+export const deleteState = async (option: string): Promise<any> => {
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/delete/states?option=${option}`;
+  const requestBody = {};
+  const requestHeaders = {};
+
+  try {
+    const response = await deleteApi(apiUrl, requestBody, requestHeaders);
+    return response?.data;
+  } catch (error) {
+    console.error("Error deleting state", error);
+    return error;
+  }
+};