diff --git a/public/chatbot.webp b/public/chatbot.webp
new file mode 100644
index 0000000..e948c77
Binary files /dev/null and b/public/chatbot.webp differ
diff --git a/src/app/kurslar/[courseId]/ogren/page.jsx b/src/app/kurslar/[courseId]/ogren/page.jsx
new file mode 100644
index 0000000..f3fd079
--- /dev/null
+++ b/src/app/kurslar/[courseId]/ogren/page.jsx
@@ -0,0 +1,45 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+import styles from './page.module.css';
+import Container from '@/components/Container';
+
+const Step = ({ step, completed, onClick }) => (
+    <div className={styles.step} onClick={() => onClick()}>
+        {completed ? '✅' : '◻️'} {step}
+    </div>
+);
+
+const Home = () => {
+    return (
+        <div className={styles.container}>
+            {/* Soldaki ders videosu */}
+            <div className={styles.videoContainer}>
+                {/* Video bileşeni veya iframe ekleyebilirsiniz */}
+                <iframe
+                    src="https://www.youtube.com/embed/VIDEO_ID"
+                    title="YouTube video player"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    className={styles.video}
+                ></iframe>
+            </div>
+
+            {/* Sağdaki kurs içeriği */}
+            <div className={styles.sidebar}>
+                
+                <div className={styles.courseContainer}>
+                    <h2>Kurs İçeriği</h2>
+                    <div className={styles.courseContent}>
+                        <Step step="Adım 1" completed={false} onClick={() => {}} />
+                        <Step step="Adım 2" completed={false} onClick={() => {}} />
+                        <Step step="Adım 3" completed={false} onClick={() => {}} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Home;
diff --git a/src/app/kurslar/[courseId]/ogren/page.module.css b/src/app/kurslar/[courseId]/ogren/page.module.css
new file mode 100644
index 0000000..e4df585
--- /dev/null
+++ b/src/app/kurslar/[courseId]/ogren/page.module.css
@@ -0,0 +1,36 @@
+/* styles/Home.module.css */
+
+.container {
+    display: flex;
+  }
+  
+  .sidebar {
+    width: 500px;
+    padding: 50px;
+    border-left: 2px solid #ccc;
+  }
+  
+  .videoContainer {
+    flex: 1; 
+    padding: 20px;
+  }
+  
+  .courseContent {
+    flex: 1;
+    padding: 10px;
+  }
+  
+  .step {
+    cursor: pointer;
+    margin-bottom: 10px;
+  }
+  
+  .video {
+    width: 120%;
+    max-width: 1000px;
+    aspect-ratio: 16 / 9;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
\ No newline at end of file
diff --git a/src/app/kurslar/[courseId]/page.jsx b/src/app/kurslar/[courseId]/page.jsx
index 461f40b..776bba5 100644
--- a/src/app/kurslar/[courseId]/page.jsx
+++ b/src/app/kurslar/[courseId]/page.jsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import Container from "@/components/Container";
 import { COURSES } from "@/mockData";
 import { cn, formatPrice } from "@/utils";
@@ -21,9 +22,11 @@ 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>
+						<br/>
+						<br/>
+						<Link href={`/kurslar/${params.courseId}/ogren`} className={cn(styles.startButton, "btn btn-primary")}>
+      						Eğitime Başla
+						</Link>
 					</div>
 				</div>
 
diff --git a/src/app/kurslar/[courseId]/page.module.css b/src/app/kurslar/[courseId]/page.module.css
index 9df403a..48284a6 100644
--- a/src/app/kurslar/[courseId]/page.module.css
+++ b/src/app/kurslar/[courseId]/page.module.css
@@ -27,6 +27,9 @@
 .buyButton {
 	margin-top: 1.5rem;
 }
+.startButton {
+	margin-top: 1rem;
+}
 
 .description {
 	margin-top: 1.5rem;
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 0c3cabb..fcc2d93 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -24,6 +24,7 @@ export default function HomePage() {
           <CourseGrid courses={COURSES} />
         </section>
       </Container>
+      
     </main>
   );
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 7af8932..d814b13 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -12,14 +12,6 @@ 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>