diff --git a/src/Pages/SupportMessages/Page.tsx b/src/Pages/SupportMessages/Page.tsx
new file mode 100644
index 0000000..bb81267
--- /dev/null
+++ b/src/Pages/SupportMessages/Page.tsx
@@ -0,0 +1,45 @@
+
+import React from 'react'
+import DashBody from '../../Layout/Dashboard/DashBody'
+import DashHeader from '../../Layout/Dashboard/DashHeader'
+import LyTable from '../../Layout/Dashboard/LyTable'
+import useTableColumns from './useTableColumns'
+import { QueryStatusEnum } from '../../config/QueryStatus'
+import { useNavigate } from 'react-router-dom'
+import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
+import { useGetSupportMessages } from '../../api/supportmessages'
+import SearchField from '../../Layout/Dashboard/SearchField'
+
+function Page() {
+
+    const column   =useTableColumns()
+    const {data  ,status } = useGetSupportMessages()
+    const navigate = useNavigate()
+    const totalRows = data?.meta?.total;
+    
+  return (
+    // Pass Status to Layout 
+    <DashBody status={status as QueryStatusEnum} >
+      <DashHeader showAddButton={false} title={'SupportMessages'}>
+      <div className='RightSide d-flex gap-2 align-center '>
+     <SearchField searchBy={"title"} />
+
+     <AddButton  onClick={()=>navigate('/support_messages/add')}></AddButton>
+     </div>
+      </DashHeader>
+      
+      <LyTable
+        data={data?.data}
+        isLoading={false}
+        columns={column}
+        total={totalRows }
+        is_pagination={true}
+    />
+      
+    
+    </DashBody>
+  )
+}
+
+export default Page
+
diff --git a/src/Pages/SupportMessages/View/AddForm.tsx b/src/Pages/SupportMessages/View/AddForm.tsx
new file mode 100644
index 0000000..a1817d7
--- /dev/null
+++ b/src/Pages/SupportMessages/View/AddForm.tsx
@@ -0,0 +1,50 @@
+
+import React, { useEffect } from 'react'
+import { Col, Row } from 'reactstrap';
+import ValidationField from '../../../Components/ValidationField/ValidationField';
+import { useGetUsers } from '../../../api/users';
+import { useFormikContext } from 'formik';
+
+function Form() {
+  const useFormatToSelect = (Data : any) => {
+    const format = (data :any) => {
+      if (!data) return [];
+      return data.map((item :any) => ({
+        value: item?.id,
+        label: item?.name,
+      }));
+    };
+  
+    return format(Data);
+  };
+  const { data: user } = useGetUsers()
+
+  const SelectData = useFormatToSelect(user?.data)
+
+
+
+  return (
+    <Row xs={1} sm={1} md={1} lg={2} xl={2}>
+    <Col>
+
+    <ValidationField name="id" label='user' placeholder='user' type="Search" option={SelectData} searchBy={"name"}  />
+
+    <ValidationField name="whatsApp"  />
+
+    </Col>
+    <Col>
+
+    <ValidationField name="subject" />
+    <ValidationField name="message"   type='TextArea'/>
+
+    </Col>
+
+
+   
+  </Row>
+  )
+}
+
+export default Form
+
+
diff --git a/src/Pages/SupportMessages/View/AddPage.tsx b/src/Pages/SupportMessages/View/AddPage.tsx
new file mode 100644
index 0000000..c463281
--- /dev/null
+++ b/src/Pages/SupportMessages/View/AddPage.tsx
@@ -0,0 +1,56 @@
+import { getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
+import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
+import 'react-tabs/style/react-tabs.css';
+import { MdLanguage } from 'react-icons/md'
+import ViewPage from '../../../Layout/Dashboard/ViewPage';
+import { useTranslation } from 'react-i18next';
+import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
+import { useAddSupportMessages } from '../../../api/supportmessages';
+import Form from './AddForm';
+
+const AddSupportMessagesPage = () => {
+    
+
+    const {mutate , isLoading:IsloadingButton , isSuccess} = useAddSupportMessages()
+  const handleSubmit = (values:any)=>{
+    console.log(values,"values");
+    
+    mutate(values)  
+   
+    
+  }
+  const {t} = useTranslation();
+
+  useNavigateOnSuccess(isSuccess , '/SupportMessages'  )
+  
+
+
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
+
+
+  return (
+    <div className='ViewPage'>
+  
+        <ViewPage {...ViewProps}>
+          <Tabs>
+            <TabList>
+              <Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleDriverInfo'>{t("BasicInfo")}</h6></div></Tab>
+
+
+
+            </TabList>
+            <TabBody >
+              <div className=" mt-4"><Form /></div>
+            </TabBody>
+           
+          </Tabs>
+        </ViewPage>
+        
+
+
+    </div>
+  )
+
+}
+
+export default AddSupportMessagesPage
\ No newline at end of file
diff --git a/src/Pages/SupportMessages/formUtil.ts b/src/Pages/SupportMessages/formUtil.ts
new file mode 100644
index 0000000..8eb1c46
--- /dev/null
+++ b/src/Pages/SupportMessages/formUtil.ts
@@ -0,0 +1,46 @@
+
+import * as Yup from "yup";
+import { buildFormData } from "../../api/helper/buildFormData";
+
+export const getInitialValues = (objectToEdit: any | null = null): any => {
+  console.log(objectToEdit,"objectToEdit");
+  return {
+    whatsApp: "",
+    subject: "",
+    message: "",
+    id:null,
+  };
+};
+
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema<any> => {
+  // Validate input
+  return Yup.object().shape({
+    whatsApp: Yup.string().required('Required'),
+    subject: Yup.string().required('Required'),
+    message: Yup.string().required('Required'),
+    id: Yup.string().required('Required'),
+
+  });
+};
+
+
+
+export const getDataToSend = (values: any): FormData => {
+  const data = { ...values };
+  
+  
+  const formData = new FormData();
+  buildFormData(formData, data);
+  return formData;
+};
+
+export const ChangeDataToPrint = (data:any)=>{
+
+  let new_array = data
+  for(let i =0 ; i<data.length ; i++){
+    new_array[i]['status'] =!data[i]['deleted_at'] ?'available':'unavailable'
+    delete new_array[i]['deleted_at']
+  }
+  return new_array
+}
\ No newline at end of file
diff --git a/src/Pages/SupportMessages/useTableColumns.tsx b/src/Pages/SupportMessages/useTableColumns.tsx
new file mode 100644
index 0000000..23e955d
--- /dev/null
+++ b/src/Pages/SupportMessages/useTableColumns.tsx
@@ -0,0 +1,62 @@
+
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import Actions from "../../Components/Ui/tables/Actions";
+import ColumnsImage from "../../Components/Columns/ColumnsImage";
+import { useNavigate } from "react-router-dom";
+import { useDeleteSupportMessages } from "../../api/supportmessages";
+
+
+const useTableColumns :any = () => {
+  const [t] = useTranslation();
+  const deleteMutation = useDeleteSupportMessages()
+  const navigate = useNavigate()
+
+  return useMemo(
+    () => [
+ 
+      {
+        name: t("email"),
+        center: true,
+        selector: (row: any) => row.email, // Specify selector function for sorting
+      },  
+
+      {
+        name: t("whatsApp"),
+        center: true,
+        selector: (row: any) => row.whatsApp, // Specify selector function for sorting
+      }, 
+
+      {
+        name: t("subject"),
+        center: true,
+        selector: (row: any) => row.subject, // Specify selector function for sorting
+      }, 
+      {
+        name: t("message"),
+        center: true,
+        selector: (row: any) => row.message, // Specify selector function for sorting
+      }, 
+      {
+        name: "#",
+        sortable: false,
+        center: true,
+        cell: (row:any) => (
+          <Actions
+            objectToEdit={row}
+            
+            onEdit={()=> navigate(`/support_messages/${row.id}`) }
+            showView={false}
+            showEdit={false}
+            onDelete={() => deleteMutation.mutate({ id: row.id })}
+          />
+        ),
+      },
+
+    ],
+    [t]
+  );
+};
+
+export default useTableColumns;
+
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 592bb01..9eef796 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -30,14 +30,21 @@ import SliderPage from "./Pages/Slider/Page";
 import AddSliderPage from "./Pages/Slider/View/AddPage";
 import EditSlider  from "./Pages/Slider/View/EditPage";
 
+
+
+import SupportMessagesPage from "./Pages/SupportMessages/Page";
+import AddSupportMessagesPage from "./Pages/SupportMessages/View/AddPage";
+// import EditSupportMessages  from "./Pages/SupportMessages/View/EditPage";
+
 import UsersPage from "./Pages/Users/Page";
 import EditUsersPage from "./Pages/Users/View/EditPage";
 
 import AddUsersNotifactionPage from "./Pages/Users/SendNotifcation/View/AddPage";
 
-import NotificationPage from "./Pages/Notifcation/Page";
+// import NotificationPage from "./Pages/Notifcation/Page";
 import AddNotificationPage from "./Pages/Notifcation/View/AddPage";
-import { MdEmail } from "react-icons/md";
+// import { MdEmail } from "react-icons/md";
+import { MessageOutlined } from "@ant-design/icons";
 
 
 
@@ -136,6 +143,7 @@ export const RoutesLinks: RoutesLinksType[] = [
         element: <AddCouponPage />,
         hidden:true
     },
+    
     {
         name: "Slider",
         element: <SliderPage />,
@@ -183,6 +191,21 @@ export const RoutesLinks: RoutesLinksType[] = [
         element: <AddNotificationPage />,
         hidden:true
     },
-    
+    {
+        name: "SupportMessages",
+        element: <SupportMessagesPage />,
+        icon: <MessageOutlined  />,
+        href: "/support_messages",
+    },
+    // {
+    //     href: "/support_messages/:id",
+    //     element: <EditSupportMessages />,    
+    //     hidden:true
+    // },
+    {
+        href: "/support_messages/add",
+        element: <AddSupportMessagesPage />,
+        hidden:true
+    },
     
 ]
\ No newline at end of file
diff --git a/src/api/supportmessages.ts b/src/api/supportmessages.ts
new file mode 100644
index 0000000..6489cf7
--- /dev/null
+++ b/src/api/supportmessages.ts
@@ -0,0 +1,26 @@
+
+import useGetQueryPagination from "./helper/ueGetPagination";
+import useAddMutation from "./helper/useAddMutation"
+import useDeleteMutation from "./helper/useDeleteMutation"
+import useGetOneQuery from "./helper/useGetOneQuery";
+import useGetQuery from "./helper/useGetQuery"
+import useUpdateMutation from "./helper/useUpdateMutation";
+import useUpdateMutationById from "./helper/useUpdateMutationById";
+  
+const API = {
+  ADD: `SupportMessages`,
+  GET_ALL: `supportMessages`,
+  DELETE: `SupportMessages`,
+  UPDATE: `SupportMessages`,
+
+};
+const KEY = "SupportMessages"
+
+
+export const useGetSupportMessages = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params);
+export const useGetOneSupportMessages = () => useGetOneQuery(KEY, API.GET_ALL);
+
+export const useAddSupportMessages = () => useAddMutation(KEY, API.ADD);
+export const useUpdateSupportMessages = () => useUpdateMutationById(KEY, API.UPDATE);
+
+export const useDeleteSupportMessages = () =>useDeleteMutation(KEY, API.DELETE);
diff --git a/src/translate/text b/src/translate/text
index ea7af03..e8a7c89 100644
--- a/src/translate/text
+++ b/src/translate/text
@@ -1,2 +1,8 @@
 sorry_only_user_can_change_his_status
-create_notification
\ No newline at end of file
+create_notification
+SupportMessages
+email
+whatsApp
+subject
+message
+SupportMessages
\ No newline at end of file