diff --git a/src/app/kategoriler / [categorySlug]/page.module.css b/src/app/kategoriler / [categorySlug]/page.module.css
new file mode 100644
index 0000000..9df403a
--- /dev/null
+++ b/src/app/kategoriler / [categorySlug]/page.module.css	
@@ -0,0 +1,33 @@
+@media screen and (max-width: 900px) {
+	.root {
+		text-align: center;
+	}
+}
+
+.columns {
+	display: flex;
+	gap: 1.5rem;
+	align-items: flex-start;
+}
+@media screen and (max-width: 900px) {
+	.columns {
+		flex-direction: column;
+		align-items: center;
+	}
+}
+
+.image {
+	width: 50%;
+	max-width: 1280px;
+	aspect-ratio: 16 / 9;
+	object-fit: cover;
+	border-radius: var(--border-radius);
+}
+
+.buyButton {
+	margin-top: 1.5rem;
+}
+
+.description {
+	margin-top: 1.5rem;
+}
diff --git a/src/app/kategoriler /page.jsx b/src/app/kategoriler /page.jsx
new file mode 100644
index 0000000..95485bb
--- /dev/null
+++ b/src/app/kategoriler /page.jsx	
@@ -0,0 +1,42 @@
+import Container from "@/components/Container";
+import styles from "./page.module.css";
+import { COURSES } from "@/mockData";
+import { formatPrice } from "@/utils";
+import CourseGrid from "@/components/CourseGrid";
+
+export default function CategoryPage({ params }) {
+  // Seçilen kategoriye göre kursları filtrele
+  const filteredCourses = COURSES.filter(
+    (course) => course.category.slug === params.categorySlug
+  );
+
+  // Eğer filtrelenen kurslar boşsa, isteğe bağlı bir mesaj gösterebilirsiniz
+  if (filteredCourses.length === 0) {
+    return (
+      <main className={styles.root}>
+        <Container>
+          <section>
+            <div>
+              <h1 className={styles.sectionTitle}>Bu kategoriye ait kurs bulunamadı.</h1>
+            </div>
+          </section>
+        </Container>
+      </main>
+    );
+  }
+
+  // Filtrelenen kurslar varsa, her bir kurs için ayrı bir blok oluşturun
+  return (
+    <main className={styles.root}>
+      <Container>
+        <section>
+          <div>
+            <h1 className={styles.sectionTitle}>{params.categorySlug}</h1>
+            <h2 className={styles.sectionTitle}>Çok Satanlar</h2>
+            <CourseGrid courses={filteredCourses} />
+          </div>
+        </section>
+      </Container>
+    </main>
+  );
+}
diff --git a/src/app/kurslar/[courseId]/page.jsx b/src/app/kurslar/[courseId]/page.jsx
index 5570816..461f40b 100644
--- a/src/app/kurslar/[courseId]/page.jsx
+++ b/src/app/kurslar/[courseId]/page.jsx
@@ -21,6 +21,9 @@ export default function CourseDetailPage({ params }) {
 						<button className={cn(styles.buyButton, "btn btn-primary")}>
 							Satın Al: {formatPrice(course.price)}
 						</button>
+						<button className={cn(styles.buyButton, "btn btn-primary")}>
+							Eğitime Başla
+						</button>
 					</div>
 				</div>
 
diff --git a/src/app/page.jsx b/src/app/page.jsx
index ed28a0d..0c3cabb 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,17 +1,29 @@
+import Link from "next/link";
 import Container from "@/components/Container";
 import CourseGrid from "@/components/CourseGrid";
-import { COURSES } from "@/mockData";
+import { CATEGORIES, COURSES } from "@/mockData";
 import styles from "./page.module.css";
 
 export default function HomePage() {
-	return (
-		<main className={styles.root}>
-			<Container>
-				<section>
-					<h1 className={styles.sectionTitle}>Çok Satanlar</h1>
-					<CourseGrid courses={COURSES} />
-				</section>
-			</Container>
-		</main>
-	);
+  return (
+    <main className={styles.root}>
+      <Container>
+        {/* Kategorilerin buton gibi yan yana dizilmiş hali */}
+        <div className={styles.categories}>
+          {CATEGORIES.map((category) => (
+            <Link key={category.slug} href={`/kategoriler/${category.slug}`}>
+              <div className={styles.categoryButton}>
+                <span>{category.name}</span>
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        <section>
+          <h1 className={styles.sectionTitle}>Çok Satanlar</h1>
+          <CourseGrid courses={COURSES} />
+        </section>
+      </Container>
+    </main>
+  );
 }
diff --git a/src/app/page.module.css b/src/app/page.module.css
index b5b083d..edc7bff 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -7,3 +7,17 @@
 	font-weight: 300;
 	margin-bottom: 1rem;
 }
+
+.categories {
+	display: flex;
+	gap: 8px;
+	margin-bottom: 16px;
+  }
+  
+  .categoryButton {
+	padding: 8px;
+	background-color: #f0f0f0;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	cursor: pointer;
+  }
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 9857a4b..7af8932 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,3 +1,4 @@
+// Header.js
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import Link from "next/link";
 import styles from "./Header.module.css";
@@ -11,6 +12,14 @@ export default function Header() {
 			</Link>
 
 			<div className={styles.nav}>
+				{/* Arama butonu ekleniyor */}
+				<div className={styles.search}>
+					<input className={styles["search-input"]} type="text" placeholder="Ara..." />
+					<button className={styles["search-button"]} type="button">
+						Ara
+					</button>
+				</div>
+
 				<Link href="/hesabim" className="btn btn-flat">
 					Hesabım
 				</Link>
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
index 0748380..8a6d231 100644
--- a/src/components/Header.module.css
+++ b/src/components/Header.module.css
@@ -18,3 +18,23 @@
 	align-items: center;
 	gap: 2.5rem;
 }
+
+.search {
+	display: flex;
+	align-items: center;
+  
+	/* input yerine .search-input class'ını kullan */
+	.search-input {
+	  padding: 8px;
+	  margin-right: 8px;
+	}
+  
+	/* button yerine .search-button class'ını kullan */
+	.search-button {
+	  padding: 8px 16px;
+	  background-color: #ff0000;
+	  color: #fff;
+	  border: none;
+	  cursor: pointer;
+	}
+  }
\ No newline at end of file
diff --git a/src/mockData.js b/src/mockData.js
index f2e1be4..0467a55 100644
--- a/src/mockData.js
+++ b/src/mockData.js
@@ -1,35 +1,75 @@
-export const COURSES = [
+// categories
+export const CATEGORIES = [
+	{ slug: "blokzincir", name: "Blokzincir" },
+	{ slug: "ön-yüz", name: "Frontend" },
+	{ slug: "linux", name: "Linux" },
+	{ slug: "yapay-zeka", name: "Yapay Zeka" },
+  ];
+  
+  // courses
+  export const COURSES = [
+	{
+	  id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
+	  name: "Ethereum ve Solidity",
+	  description:
+		"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
+	  price: "0.05",
+	  start: "",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
+	  instructor: {
+		name: "Baturalp Güvenç",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "blokzincir"),
+	},
 	{
 		id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
-		name: "Ethereum ve Solidity",
+		name: "Audit",
 		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
+		  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
 		price: "0.05",
+		start: "",
 		imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
 		instructor: {
-			name: "Baturalp Güvenç",
+		  name: "Mehmet Hayırlı",
 		},
+		category: CATEGORIES.find((category) => category.slug === "blokzincir"),
+	  },
+	{
+	  id: "c7253736-5756-4a64-a072-917c66afa877",
+	  name: "Next.js ile Önyüz Uygulamaları Geliştirme",
+	  description:
+		"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
+	  price: "0.05",
+	  start: "",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/elmacik.webp",
+	  instructor: {
+		name: "Furkan Ayvaz",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "ön-yüz"),
 	},
 	{
-		id: "c7253736-5756-4a64-a072-917c66afa877",
-		name: "Next.js ile Önyüz Uygulamaları Geliştirme",
-		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
-		price: "0.05",
-		imageUrl: "https://osmannyildiz.tk/cublearn/elmacik.webp",
-		instructor: {
-			name: "Furkan Ayvaz",
-		},
+	  id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
+	  name: "Pardus'a Giriş",
+	  description:
+		"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
+	  price: "0.05",
+	  start: "",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/masalik.webp",
+	  instructor: {
+		name: "Berk Çiçek",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "linux"),
 	},
 	{
-		id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
-		name: "Pardus'a Giriş",
-		description:
-			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
-		price: "0.05",
-		imageUrl: "https://osmannyildiz.tk/cublearn/masalik.webp",
-		instructor: {
-			name: "Berk Çiçek",
-		},
+	  id: "6a375fae8-5f4e-4244d-a05e-44b84b8adaf7aed",
+	  name: "Yapay Zekaya Giriş",
+	  description: "Hosta La Vista!",
+	  price: "0.05",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
+	  instructor: {
+		name: "Muhammed Akıncı",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "yapay-zeka"),
 	},
-];
+  ];
+  
\ No newline at end of file