diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx
index 11f4123..d6fa8be 100644
--- a/app/components/ui/carousel.tsx
+++ b/app/components/ui/carousel.tsx
@@ -1,3 +1,31 @@
-export const Carousel = () => {
-  return <div>Carousel</div>
+import { twMerge } from 'tailwind-merge'
+
+import type { TNews } from '~/types/news'
+
+export const Carousel = (properties: TNews) => {
+  const { title, description, items, type } = properties
+  return (
+    <div>
+      <div>
+        <h2>{title}</h2>
+        <p>{description}</p>
+      </div>
+      <div
+        className={twMerge(
+          type === 'hero' ? 'grid grid-cols-1' : 'grid grid-cols-3',
+        )}
+      >
+        {items.map(({ image, title, content }, index) => (
+          <div key={index}>
+            <img
+              src={image}
+              alt={title}
+            />
+            <h3>{title}</h3>
+            <p>{content}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
 }
diff --git a/app/pages/news/data.ts b/app/pages/news/data.ts
new file mode 100644
index 0000000..c06af15
--- /dev/null
+++ b/app/pages/news/data.ts
@@ -0,0 +1,67 @@
+import type { TNews } from '~/types/news'
+
+export const SPOTLIGHT: TNews = {
+  title: 'SPOTLIGHT',
+  description: 'Berita Terhangat hari ini',
+  type: 'hero',
+  items: [
+    {
+      title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
+      content:
+        'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
+      image: '/images/news-1.jpg',
+    },
+  ],
+}
+
+export const BERITA: TNews = {
+  title: 'BERITA',
+  description: 'Berita Terhangat hari ini',
+  type: 'grid',
+  items: [
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-2.jpg',
+    },
+    {
+      title: 'How does writing influence your personal brand?',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-3.jpg',
+    },
+    {
+      title: 'Helping a local business reinvent itself',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-4.jpg',
+    },
+  ],
+}
+
+export const KAJIAN: TNews = {
+  title: 'KAJIAN',
+  description: 'Berita Terhangat hari ini',
+  type: 'grid',
+  items: [
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-2.jpg',
+    },
+    {
+      title: 'How does writing influence your personal brand?',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-3.jpg',
+    },
+    {
+      title: 'Helping a local business reinvent itself',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-4.jpg',
+    },
+  ],
+}
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index 225a83f..04c8dee 100644
--- a/app/pages/news/index.tsx
+++ b/app/pages/news/index.tsx
@@ -1,17 +1,21 @@
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
 
+import { BERITA, KAJIAN, SPOTLIGHT } from './data'
 import { Newsletter } from './newsletter'
 
 export const NewsPage = () => {
   return (
     <div className="relative">
       <Card>
-        <Carousel />
+        <Carousel {...SPOTLIGHT} />
       </Card>
       <Newsletter />
       <Card>
-        <Carousel />
+        <Carousel {...BERITA} />
+      </Card>
+      <Card>
+        <Carousel {...KAJIAN} />
       </Card>
     </div>
   )
diff --git a/app/types/news.ts b/app/types/news.ts
new file mode 100644
index 0000000..46a5d16
--- /dev/null
+++ b/app/types/news.ts
@@ -0,0 +1,10 @@
+export type TNews = {
+  title: string
+  description: string
+  type: 'hero' | 'grid'
+  items: {
+    title: string
+    content: string
+    image: string
+  }[]
+}
diff --git a/public/images/news-1.jpg b/public/images/news-1.jpg
new file mode 100644
index 0000000..263bc4e
Binary files /dev/null and b/public/images/news-1.jpg differ
diff --git a/public/images/news-2.jpg b/public/images/news-2.jpg
new file mode 100644
index 0000000..6251754
Binary files /dev/null and b/public/images/news-2.jpg differ
diff --git a/public/images/news-3.jpg b/public/images/news-3.jpg
new file mode 100644
index 0000000..e9cc320
Binary files /dev/null and b/public/images/news-3.jpg differ
diff --git a/public/images/news-4.jpg b/public/images/news-4.jpg
new file mode 100644
index 0000000..674738f
Binary files /dev/null and b/public/images/news-4.jpg differ