diff --git a/src/App.js b/src/App.js
index ecd8b7e..d55df78 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,6 +20,7 @@ import avatar6 from "./assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg";
 import avatar7 from "./assets/img/avatar/pexels-yuri-manei-2690323.jpg";
 import LoginSignUp from './view/LoginSignUp';
 import Register from './view/register'
+import Services from './view/services';
 
 
 let data = [
@@ -666,6 +667,7 @@ function App() {
           <Route path="/register" element={<Register  activeLogin={activeLogin}/>}/>
           <Route path="/accounting" element={<Accounting />} />
           <Route path="/messages" element={<Messages />} />
+          <Route path="/services" element={<Services />} />
           <Route path="/dashboard" element={ <Dashboard
                 ActiveUserFullInfo={ActiveUserFullInfo}
                 UserFullInfoData={UserFullInfoData}
diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js
index c5c688c..54b8e5f 100644
--- a/src/components/nav/Nav.js
+++ b/src/components/nav/Nav.js
@@ -112,7 +112,7 @@ const Nav = ({ logOut }) => {
         </Link>
         {/* ---------- */}
         <Link
-          to="/accounting"
+          to="/services"
           className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
           onClick={() => chaneNav(2)}
         >
@@ -181,7 +181,7 @@ const Nav = ({ logOut }) => {
             className="nav-menu-container-item-title text-sm"
             style={2 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
           >
-            حسابداری
+            انتخاب خدمات
           </div>
         </Link>
         {/* ---------- */}
diff --git a/src/components/products/classes/index.js b/src/components/products/classes/index.js
new file mode 100644
index 0000000..3e35aa1
--- /dev/null
+++ b/src/components/products/classes/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+const Class = ({
+    title,
+    description,
+    teacher,
+    group,
+    price,
+}) => {
+    return(
+        <div>
+            <h1>{title}</h1>
+            <p>{description}</p>
+            {teacher} {group} {price}
+        </div>
+    )
+};
+
+export default Class
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..edc5b2a
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,127 @@
+const PLATFORM_DATA = {
+        classes: [
+            {
+                id: 0,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 1,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 2,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 3,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 4,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 5,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 6,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 7,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 8,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+            {
+                id: 9,
+                title: 'علوم تجربی',
+                gender: 'male',
+                grade: 9,
+                group: 'A',
+                category:'online',
+                teacher: 'محمدرضا سلیمی',
+                price: 90000,
+                capacity: 20,
+                description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد'
+            },
+
+        ]
+}
+
+export default PLATFORM_DATA;
\ No newline at end of file
diff --git a/src/view/services/index.js b/src/view/services/index.js
new file mode 100644
index 0000000..a43a3b7
--- /dev/null
+++ b/src/view/services/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+import Class from "../../components/products/classes";
+import PLATFORM_DATA from "../../store";
+const Services = () => {
+    return(
+        <div className="flex" style={{width: '93.5%', marginRight: '6.5%', marginTop: '8.5%'}}>
+            
+            {
+                PLATFORM_DATA.classes.map((item, idx) => (
+                    <Class title={item.title} description={item.description} price={item.price} group={item.group} teacher={item.teacher} />
+                ))
+            }
+
+        </div>
+    );
+};
+
+export default Services;
\ No newline at end of file