diff --git a/app/components/untils/Items.tsx b/app/components/body/learn.tsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/untils/Items.tsx
rename to app/components/body/learn.tsx
diff --git a/app/components/untils/Carousel.tsx b/app/components/untils/Carousel.tsx
index e9eff99..0ea29e9 100755
--- a/app/components/untils/Carousel.tsx
+++ b/app/components/untils/Carousel.tsx
@@ -11,13 +11,21 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "@/ui/carousel";
+  const imageUrls = [
 
+  "/images/carousel-1.jpg",
+  "/images/carousel-2.jpg",
+  "/images/carousel-3.jpg",
+  "/images/carousel-4.jpg",
+  "/images/carousel-5.jpg",
+  "/images/carousel-6.jpg",
+];
 export function CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
 
-  const totalSlides = 6; 
+  const totalSlides = imageUrls.length; 
 
   React.useEffect(() => {
     if (!api) return;
@@ -46,12 +54,16 @@ export function CarouselDemo() {
         className="w-full"
       >
         <CarouselContent>
-          {Array.from({ length: totalSlides }).map((_, index) => (
+          {imageUrls.map((src, index) => (
             <CarouselItem key={index}>
               <div className="p-1">
                 <Card>
                   <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-4xl font-semibold">{index + 1}</span>
+                     <img
+                      src={src}
+                      alt={`Slide ${index + 1}`}
+                      className="w-full h-full object-cover"
+                    />
                   </CardContent>
                 </Card>
               </div>
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index ac951f6..a5f1f22 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -2,6 +2,10 @@ import { CarouselDemo } from "@/components/untils/Carousel";
 import type { Route } from "./+types/news";
 import { Header } from "@/components/header/Header";
 import { TopNav } from "@/components/header/TopNav";
+import NewsList from "@/components/list/NewsList";
+
+import { C } from "node_modules/react-router/dist/development/index-react-server-client-rcoGPJhU.mjs";
+import { Carousel } from "@/ui/carousel";
 
 
 export function meta({}: Route.MetaArgs) {
@@ -14,8 +18,6 @@ export function meta({}: Route.MetaArgs) {
 export default function Home() {
   return (
     <div>
-      <Header />
-      <TopNav />
       <CarouselDemo />
     </div>
   );
diff --git a/public/images/carousel-1.jpg b/public/images/carousel-1.jpg
new file mode 100644
index 0000000..dd0a116
Binary files /dev/null and b/public/images/carousel-1.jpg differ
diff --git a/public/images/carousel-2.jpg b/public/images/carousel-2.jpg
new file mode 100644
index 0000000..39ff910
Binary files /dev/null and b/public/images/carousel-2.jpg differ
diff --git a/public/images/carousel-3.jpg b/public/images/carousel-3.jpg
new file mode 100644
index 0000000..3b4326e
Binary files /dev/null and b/public/images/carousel-3.jpg differ
diff --git a/public/images/carousel-4.jpg b/public/images/carousel-4.jpg
new file mode 100644
index 0000000..896f77a
Binary files /dev/null and b/public/images/carousel-4.jpg differ
diff --git a/public/images/carousel-5.jpg b/public/images/carousel-5.jpg
new file mode 100644
index 0000000..8cc7d97
Binary files /dev/null and b/public/images/carousel-5.jpg differ
diff --git a/public/images/carousel-6.jpg b/public/images/carousel-6.jpg
new file mode 100644
index 0000000..030543f
Binary files /dev/null and b/public/images/carousel-6.jpg differ