diff --git a/app/specialties/page.js b/app/specialties/page.js
index 3ebb4ec..3b37acb 100644
--- a/app/specialties/page.js
+++ b/app/specialties/page.js
@@ -1,10 +1,10 @@
-import DoctorsPage from '@/components/doctors';
 import Layout from '@/components/layout';
+import SpecialtiesPage from '@/components/specialties';
 
 function Doctors() {
     return (
         <Layout title='تخصص ها' name='specialties'>
-            <DoctorsPage />
+            <SpecialtiesPage />
         </Layout>
     )
 }
diff --git a/components/specialties/head/SearchBar.js b/components/specialties/head/SearchBar.js
new file mode 100644
index 0000000..319959f
--- /dev/null
+++ b/components/specialties/head/SearchBar.js
@@ -0,0 +1,42 @@
+import ArrowBottomD from '@/components/icons/ArrowBottomD'
+import SearchD from '@/components/icons/SearchD'
+import SettingD from '@/components/icons/SettingD'
+import { Button, ButtonGroup, TextField } from '@mui/material'
+import React from 'react'
+
+function SearchBar() {
+    return (
+        <ButtonGroup
+            variant="contained"
+            className="!bg-[#FFF] !w-2/3 !mt-[15px] !rounded-lg !overflow-hidden flex items-center !h-[64px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
+        >
+            <TextField
+                variant="standard"
+                InputProps={{
+                    disableUnderline: true
+                }}
+                sx={{
+                    '& .MuiInputBase-root': {
+                        height: '100%'
+                    },
+                    '& .MuiInput-root': {
+                        borderBottom: 'none',
+                    },
+                    '& .MuiInputBase-input': {
+                        color: '#7E7E7E'
+                    }
+                }}
+                placeholder="جستجوی تخصص"
+                dir='rtl'
+                className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+            />
+            <Button
+                className="!rounded-[4px] !ml-1 !w-[56px] !h-[56px] !gap-2.5 !p-4"
+            >
+                <SearchD />
+            </Button>
+        </ButtonGroup>
+    )
+}
+
+export default SearchBar
\ No newline at end of file
diff --git a/components/specialties/head/index.js b/components/specialties/head/index.js
new file mode 100644
index 0000000..6c03251
--- /dev/null
+++ b/components/specialties/head/index.js
@@ -0,0 +1,13 @@
+import SearchBar from "./SearchBar"
+
+function Head() {
+    return (
+        <div className="pt-[195px] padding-responsive bg-[#F6F7F9] pb-[85px] flex flex-col items-center gap-[25px]">
+            <p className="text-[#3B3B3B] text-[24px] text-center font-bold">تخصص مورد نظر شما چیست؟</p>
+            <p className="text-[#3B3B3B] text-[16px] text-center font-normal">تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:</p>
+            <SearchBar />
+        </div>
+    )
+}
+
+export default Head
\ No newline at end of file
diff --git a/components/specialties/index.js b/components/specialties/index.js
index a0d9afa..cdeaffc 100644
--- a/components/specialties/index.js
+++ b/components/specialties/index.js
@@ -1,6 +1,12 @@
+import Head from "./head"
+import List from "./list"
+
 function SpecialtiesPage() {
     return (
-        <div>SpecialtiesPage</div>
+        <div className="">
+            <Head />
+            <List />
+        </div>
     )
 }
 
diff --git a/components/specialties/list/index.js b/components/specialties/list/index.js
new file mode 100644
index 0000000..af6dd31
--- /dev/null
+++ b/components/specialties/list/index.js
@@ -0,0 +1,9 @@
+function List() {
+    return (
+        <ul className="grid grid-cols-6 gap-x-[24px gap-y-[40px] bg-[#FAFAFA]">
+
+        </ul>
+    )
+}
+
+export default List;
\ No newline at end of file
diff --git a/data/specialties.json b/data/specialties.json
new file mode 100644
index 0000000..e69de29
