diff --git a/src/app/globals.css b/src/app/globals.css
index e7dad5a..f08d800 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,6 +25,24 @@ a {
 	text-decoration: none;
 }
 
+.btn {
+	color: white;
+	background-color: var(--color-accent);
+	border: none;
+	border-radius: var(--border-radius);
+	padding: 0.75rem 1rem;
+	font-size: 1rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: transform 0.125s;
+}
+.btn:hover {
+	transform: scale(1.025);
+}
+.btn:active {
+	transform: scale(0.95);
+}
+
 .fg-accent {
 	color: var(--color-accent);
 }
diff --git a/src/app/kurslar/[courseId]/page.jsx b/src/app/kurslar/[courseId]/page.jsx
new file mode 100644
index 0000000..0dd5815
--- /dev/null
+++ b/src/app/kurslar/[courseId]/page.jsx
@@ -0,0 +1,31 @@
+import Container from "@/components/Container";
+import { COURSES } from "@/mockData";
+import { cn, formatPrice } from "@/utils";
+import styles from "./page.module.css";
+
+export default function CourseDetailPage({ params }) {
+	const course = COURSES.find((c) => c.id === params.courseId);
+
+	return (
+		<main className={styles.root}>
+			<Container>
+				<div className={styles.columns}>
+					<img
+						className={styles.image}
+						src={course.imageUrl}
+						alt="Kurs resmi"
+					/>
+					<div>
+						<h1>{course.name}</h1>
+						<div>{course.instructor.name}</div>
+						<button className={cn(styles.buyButton, "btn")}>
+							Satın Al: {formatPrice(course.price)}
+						</button>
+					</div>
+				</div>
+
+				<p className={styles.description}>{course.description}</p>
+			</Container>
+		</main>
+	);
+}
diff --git a/src/app/kurslar/[courseId]/page.module.css b/src/app/kurslar/[courseId]/page.module.css
new file mode 100644
index 0000000..9df403a
--- /dev/null
+++ b/src/app/kurslar/[courseId]/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/components/Container.module.css b/src/components/Container.module.css
index 3907422..5344316 100644
--- a/src/components/Container.module.css
+++ b/src/components/Container.module.css
@@ -2,4 +2,6 @@
 	max-width: var(--max-width);
 	margin-left: auto;
 	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
 }
diff --git a/src/components/CourseGridItem.jsx b/src/components/CourseGridItem.jsx
index fcad69e..236e7d6 100644
--- a/src/components/CourseGridItem.jsx
+++ b/src/components/CourseGridItem.jsx
@@ -1,14 +1,15 @@
 import { formatPrice } from "@/utils";
+import Link from "next/link";
 import styles from "./CourseGridItem.module.css";
 
 export default function CourseGridItem({ course }) {
 	return (
-		<div className={styles.root}>
+		<Link href={`/kurslar/${course.id}`} className={styles.root}>
 			<img className={styles.image} src={course.imageUrl} alt="Kurs resmi" />
 			<div className={styles.body}>
 				<span className={styles.name}>{course.name}</span>
 				<span>{formatPrice(course.price)}</span>
 			</div>
-		</div>
+		</Link>
 	);
 }
diff --git a/src/components/CourseGridItem.module.css b/src/components/CourseGridItem.module.css
index ab9391f..53b96d8 100644
--- a/src/components/CourseGridItem.module.css
+++ b/src/components/CourseGridItem.module.css
@@ -2,7 +2,6 @@
 	background-color: var(--color-bg1);
 	border-radius: var(--border-radius);
 	overflow: hidden;
-	cursor: pointer;
 }
 
 .image {
diff --git a/src/mockData.js b/src/mockData.js
index 40f213a..f2e1be4 100644
--- a/src/mockData.js
+++ b/src/mockData.js
@@ -2,6 +2,8 @@ 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",
 		imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
 		instructor: {
@@ -11,6 +13,8 @@ export const COURSES = [
 	{
 		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: {
@@ -20,6 +24,8 @@ export const COURSES = [
 	{
 		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: {