diff --git a/apps/web/src/app/main/courses/components/CourseCard.tsx b/apps/web/src/app/main/courses/components/CourseCard.tsx
index d830c4d..cbdb80c 100755
--- a/apps/web/src/app/main/courses/components/CourseCard.tsx
+++ b/apps/web/src/app/main/courses/components/CourseCard.tsx
@@ -24,8 +24,7 @@ export default function CourseCard({ course }: CourseCardProps) {
 			onClick={() => handleClick(course)}
 			key={course.id}
 			hoverable
-			className="group overflow-hidden rounded-2xl border border-gray-200 bg-white 
-      shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
+			className="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
 			cover={
 				<div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
 					<div
@@ -48,10 +47,10 @@ export default function CourseCard({ course }: CourseCardProps) {
 								// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
 								color={
 									term?.taxonomy?.slug ===
-									TaxonomySlug.CATEGORY
+										TaxonomySlug.CATEGORY
 										? "blue"
 										: term?.taxonomy?.slug ===
-											  TaxonomySlug.LEVEL
+											TaxonomySlug.LEVEL
 											? "green"
 											: "orange"
 								}
diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
index 40043a3..d589d35 100755
--- a/apps/web/src/app/main/home/components/CategorySection.tsx
+++ b/apps/web/src/app/main/home/components/CategorySection.tsx
@@ -43,7 +43,7 @@ const CategorySection = () => {
 	return (
 		<section className="py-8 relative overflow-hidden">
 			<div className="max-w-screen-2xl mx-auto px-4 relative">
-				<div className="text-center mb-24">
+				<div className="text-center mb-12">
 					<Title
 						level={2}
 						className="font-bold text-5xl mb-6 bg-gradient-to-r from-gray-900 via-gray-700 to-gray-800 bg-clip-text text-transparent motion-safe:animate-gradient-x">
diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx
index 902e979..e890b62 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -43,16 +43,16 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
 		type: TaxonomySlug.CATEGORY,
 	});
 	return (
-		<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
+    <section className="relative py-16 overflow-hidden bg-gray-200">
+      <div className="absolute inset-0 bg-white max-w-screen-2xl mx-auto px-6"></div>
 			<div className="max-w-screen-2xl mx-auto px-6 relative">
-				<div className="flex justify-between items-end mb-16">
+				<div className="flex justify-between items-end mb-16 ">
 					<div>
 						<Title
 							level={2}
 							className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
 							{title}
 						</Title>
-					
 						<Text
 							type="secondary"
 							className="text-xl font-light text-gray-600">
diff --git a/apps/web/src/app/main/home/components/HeroSection.tsx b/apps/web/src/app/main/home/components/HeroSection.tsx
index 17aa228..192761f 100755
--- a/apps/web/src/app/main/home/components/HeroSection.tsx
+++ b/apps/web/src/app/main/home/components/HeroSection.tsx
@@ -111,7 +111,7 @@ const HeroSection = () => {
 			{
 				countStatistics > 1 && (
 					<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
-						<div className={`rounded-2xl grid grid-cols-${countStatistics} md:grid-cols-${countStatistics} gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]`}>
+						<div className={`rounded-2xl grid grid-cols-${countStatistics} md:grid-cols-${countStatistics} gap-4 md:gap-8 p-6 md:p-8 bg-white border  duration-500 `}>
 							{platformStats.map((stat, index) => {
 								return stat.value
 									? (<div
diff --git a/apps/web/src/app/main/layout/MainLayout.tsx b/apps/web/src/app/main/layout/MainLayout.tsx
index b573e2f..be54216 100755
--- a/apps/web/src/app/main/layout/MainLayout.tsx
+++ b/apps/web/src/app/main/layout/MainLayout.tsx
@@ -11,7 +11,7 @@ export function MainLayout() {
 		<MainProvider>
 			<Layout className="min-h-screen  bg-gray-100">
 				<MainHeader />
-				<Content className="mt-16 bg-gray-50 ">
+				<Content className="mt-16 bg-gray-200 ">
 					<Outlet />
 				</Content>
 				<MainFooter />