diff --git a/app/layout.tsx b/app/layout.tsx
index e539e85..45c6244 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -39,7 +39,7 @@ export default function RootLayout({
 					fontSans.variable
 				)}
 			>
-				<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
+				<Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
 					<div className=" ">
 						<Navbar />
 						<main className=" w-screen pt-2  flex-grow">
diff --git a/app/page.tsx b/app/page.tsx
index 0a8b1d2..ea3023a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,7 +5,7 @@ import VisiMisi from "@/components/landing/visi-misi";
 
 export default function Home() {
 	return (
-		<div>
+		<div className="w-full h-full">
 			<Banner />
 			<VisiMisi />
 			<Headline />
diff --git a/components/landing/banner.tsx b/components/landing/banner.tsx
index e4f36df..5bec4ff 100644
--- a/components/landing/banner.tsx
+++ b/components/landing/banner.tsx
@@ -11,41 +11,12 @@ export default function Banner() {
         slidesToShow: 3,
         slidesToScroll: 3
     };
-
+    ``
     return (
-        <div>
-            <div className='relative h-screen'>
-                <Image
-                    src='/banner2.png'
-                    alt='banner'
-                    fill={true}
-                />
+        <div className='flex flex-wrap'>
+            <div className='h-auto max-w-full relative'>
+                <img src="/banner2.png" width={'100%'} height={'100%'} />
             </div>
-            {/* <div className='space-y-3'>
-                <div className='flex h-[231px] gap-3'>
-                    <div className='w-[45%]'>
-                        1
-                    </div>
-                    <div className='w-[15%]'>2</div>
-                    <div className='w-[15%]'>3</div>
-                    <div className='w-[25%]'>4</div>
-                </div>
-                <div className='flex h-[231px] gap-3'>
-                    <div className='w-[25%]'>1</div>
-                    <div className='w-[15%]'>2</div>
-                    <div className='w-[35%]'>3</div>
-                    <div className='w-[25%]'>4</div>
-                </div>
-                <div className='flex h-[231px] gap-3'>
-                    <div className='w-[24%]'>1</div>
-                    <div className='w-[18%]'>2</div>
-                    <div className='w-[33%]'>3</div>
-                    <div className='w-[25%]'>4</div>
-                </div>
-            </div> */}
-            {/* <div className='mx-10'> */}
-
-            {/* </div> */}
         </div>
     )
 }
diff --git a/components/landing/visi-misi.tsx b/components/landing/visi-misi.tsx
index 12d272a..cc68210 100644
--- a/components/landing/visi-misi.tsx
+++ b/components/landing/visi-misi.tsx
@@ -1,19 +1,46 @@
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
+'use client'
+
+// import "slick-carousel/slick/slick.css";
+// import "slick-carousel/slick/slick-theme.css";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode, Pagination } from "swiper/modules";
+
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/free-mode";
 
-import Slider from "react-slick";
-import { Card, CardBody } from "@nextui-org/react";
 import Image from "next/image";
 
+const images = [
+    {
+        id: 1,
+        url: "/vm1.jpg",
+        title: "Image 1",
+        description: "Description of image 1"
+    },
+    {
+        id: 2,
+        url: "/vm2.jpg",
+        title: "Image 2",
+        description: "Description of image 2"
+    },
+    {
+        id: 3,
+        url: "/vm3.jpg",
+        title: "Image 3",
+        description: "Description of image 3"
+    }
+];
+
 export default function VisiMisi() {
     return (
-        <div className='h-screen m-7'>
-            <div className='h-1/3 w-1/4 p-3 text-green-600'>
-                <p className='text-3xl font-bold'>Visi & Misi</p>
-                <p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p>
-            </div>
-            <div className='h-2/3 flex gap-3 '>
-                <div className='w-1/4 my-auto'>
+        <div className='flex flex-wrap lg:m-10 m-5'>
+            <div className="flex-none lg:w-1/4 w-full">
+                <div className='p-3 text-green-600'>
+                    <p className='text-3xl font-bold'>Visi & Misi</p>
+                    <p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p>
+                </div>
+                <div>
                     <Image
                         height={400}
                         width={400}
@@ -21,37 +48,90 @@ export default function VisiMisi() {
                         alt='banner'
                     />
                 </div>
-                <div className='w-3/4 flex gap-5 my-auto justify-center'>
-                    <Card className="h-[420px] w-[300px]">
-                        <CardBody>
-                            <Image
-                                alt="vm"
-                                className="object-cover"
-                                src="/vm1.jpg"
-                                fill={true}
-                            />
-                        </CardBody>
-                    </Card>
-                    <Card className="h-[420px] w-[300px]">
-                        <CardBody>
-                            <Image
-                                alt="vm"
-                                className="object-cover"
-                                src="/vm2.jpg"
-                                fill={true}
-                            />
-                        </CardBody>
-                    </Card>
-                    <Card className="h-[420px] w-[300px]">
-                        <CardBody>
-                            <Image
-                                alt="vm"
-                                className="object-cover"
-                                src="/vm3.jpg"
-                                fill={true}
-                            />
-                        </CardBody>
-                    </Card>
+            </div>
+            <div className="lg:grow flex-none">
+                <div className="lg:w-full w-[92vw]">
+                    {/* <div className='ml-5 lg:mt-52 w-4/5 lg:w-full mt-10 flex gap-5 my-auto lg:justify-center justify-left overflow-x-scroll'>
+                        <Card className="flex-none h-[420px] w-[300px]">
+                            <CardBody>
+                                <Image
+                                    alt="vm"
+                                    className="object-cover"
+                                    src="/vm1.jpg"
+                                    fill={true}
+                                />
+                            </CardBody>
+                        </Card>
+                        <Card className="flex-none h-[420px] w-[300px]">
+                            <CardBody>
+                                <Image
+                                    alt="vm"
+                                    className="object-cover"
+                                    src="/vm2.jpg"
+                                    fill={true}
+                                />
+                            </CardBody>
+                        </Card>
+                        <Card className="flex-none h-[420px] w-[300px]">
+                            <CardBody>
+                                <Image
+                                    alt="vm"
+                                    className="object-cover"
+                                    src="/vm3.jpg"
+                                    fill={true}
+                                />
+                            </CardBody>
+                        </Card>
+                    </div> */}
+                    <div className="flex items-center justify-center mt-6 lg:mt-44">
+                        <Swiper
+                            breakpoints={{
+                                450: {
+                                    slidesPerView: 1,
+                                    spaceBetween: 5,
+                                },
+                                700: {
+                                    slidesPerView: 2,
+                                    spaceBetween: 15,
+                                },
+                                900: {
+                                    slidesPerView: 3,
+                                    spaceBetween: 15,
+                                },
+                            }}
+                            freeMode={true}
+                            pagination={{
+                                clickable: true,
+                            }}
+                            modules={[FreeMode, Pagination]}
+                            className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
+                        >
+                            {images.map((item) => (
+                                <SwiperSlide key={item.title}>
+                                    <div className="flex flex-col gap-6 mb-20 group relative shadow-lg text-white rounded-xl px-6 py-8 h-[300px] w-full lg:h-[400px] lg:w-[300px] overflow-hidden cursor-pointer">
+                                        {/* <div
+                                            className="absolute inset-0 bg-cover bg-center"
+                                            style={{ backgroundImage: `url(${item.url})` }}
+                                        /> */}
+                                         <Image
+                                            alt="vm"
+                                            className="object-cover"
+                                            src={item.url}
+                                            fill={true}
+                                        />
+                                        <div className="absolute inset-0 bg-black opacity-10 group-hover:opacity-50" />
+                                        <div className="relative flex flex-col gap-3">
+                                            {/* <item.icon className="text-blue-600 group-hover:text-blue-400 w-[32px] h-[32px]" /> */}
+                                            <h1 className="text-xl lg:text-2xl">{item.title} </h1>
+                                            <p className="lg:text-[18px]">{item.description} </p>
+                                            {/* </div>
+                                    <RxArrowTopRight className="absolute bottom-5 left-5 w-[35px] h-[35px] text-white group-hover:text-blue-500 group-hover:rotate-45 duration-100" /> */}
+                                        </div>
+                                    </div>
+                                </SwiperSlide>
+                            ))}
+                        </Swiper>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 5865d68..653fc76 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -47,7 +47,9 @@ export const Navbar = () => {
 	);
 
 	return (
-		<NextUINavbar maxWidth="xl" position="sticky">
+		<NextUINavbar maxWidth="xl" position="sticky" className={"px-8 py-3"} classNames={{
+            wrapper: "max-w-full",
+          }}>
 			<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
 				<NavbarBrand as="li" className="gap-3 max-w-fit">
 					<NextLink className="flex justify-start items-center gap-1" href="/">
@@ -61,7 +63,7 @@ export const Navbar = () => {
 				</NavbarBrand>
 			</NavbarContent>
 			<NavbarContent>
-				<ul className="hidden lg:flex gap-4 justify-start ml-2">
+				<ul className="hidden lg:flex gap-3 justify-start ml-2">
 					{siteConfig.navItems.map((item) => (
 						<NavbarItem key={item.href}>
 							<NextLink
@@ -92,8 +94,8 @@ export const Navbar = () => {
 					</Link>
 					<Link isExternal href={siteConfig.links.github} aria-label="Github">
 						<GithubIcon className="text-default-500" />
-					</Link> */}
-					<ThemeSwitch />
+					</Link>
+					<ThemeSwitch /> */}
 				</NavbarItem>
 				{/* <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem> */}
 				{/* <NavbarItem className="hidden md:flex">
diff --git a/package-lock.json b/package-lock.json
index c67e2f7..ac0b96f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "react-dropzone": "^14.2.3",
         "react-slick": "^0.29.0",
         "slick-carousel": "^1.8.1",
+        "swiper": "^11.0.5",
         "tailwind-variants": "^0.1.18",
         "tailwindcss": "3.3.5",
         "typescript": "^5.0.4"
@@ -6421,6 +6422,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.5.tgz",
+      "integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
diff --git a/package.json b/package.json
index 2bb0b40..6675840 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "react-dropzone": "^14.2.3",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",
+    "swiper": "^11.0.5",
     "tailwind-variants": "^0.1.18",
     "tailwindcss": "3.3.5",
     "typescript": "^5.0.4"
diff --git a/tailwind.config.js b/tailwind.config.js
index 157a466..5ad38d4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,8 @@ module.exports = {
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+    "./node_modules/swiper/swiper-react.mjs",
   ],
   theme: {
     extend: {},