diff --git a/.gitignore b/.gitignore
index d8dee9e..8d4bfd8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -130,4 +130,4 @@ dist-ssr
 
 pnpm-lock.yaml
 .directory
-
+package-lock.json
\ No newline at end of file
diff --git a/package.json b/package.json
index d6499bd..d634880 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
   "dependencies": {
     "@emailjs/browser": "^4.4.1",
     "axios": "^1.7.7",
+    "lucide-react": "^0.453.0",         
+    "framer-motion": "^11.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index 767d11f..9966aca 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -1,70 +1,144 @@
-import { Brand } from "./Brand"
+import { useState } from 'react';
+import { Brand } from "./Brand";
 import { Link } from "react-router-dom";
 // Icons
 import TelegramIcon from "@/assets/icons/telegram.svg";
 import GithubIcon from "@/assets/icons/github.svg";
 import HamburgerIcon from '@/assets/icons/menu.svg';
+import LogtengDevLogo from '@/assets/lotengdev-logo.svg';
+
 
 function CTAButtons() {
     return (
         <div className="hidden lg:flex justify-center">
-            <a href="https://t.me/lotengdev" target="_blank" className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded text-white">
-                <img className="inline mr-3" src={TelegramIcon} />Join Group
+            <a href="https://t.me/lotengdev" target="_blank" className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded-full text-white shadow hover:bg-blue-700 transition duration-300">
+                <img className="inline mr-3" src={TelegramIcon} alt="Telegram" />Join Group
+            </a>
+            <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">
+                <img className="inline mr-3" src={GithubIcon} alt="Github" />Contribute
+
+            <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded text-white">
+                <img className="inline mr-3" src={TelegramIcon} alt="Telegram Icon" />Join Group
             </a>
-            <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
-                <img className="inline mr-3" src={GithubIcon} />Contribute
+            <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" rel="noopener noreferrer" className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
+                <img className="inline mr-3" src={GithubIcon} alt="GitHub Icon" />Contribute
             </a>
         </div>
-    )
+    );
 }
 
-
 export default function Navbar() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleNavbar = () => {
+        setIsOpen(!isOpen);
+    };
+
     return (
-        <nav className="px-6 py-4 flex items-center shadow-md">
+        <nav className="px-6 py-4 flex items-center shadow-md relative">
             <Brand url="/" />
+            <ul className="hidden lg:flex flex-grow pl-10 list-none">
+                <li className="mr-4">
+                    <Link to="/" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Home</Link>
+                </li>
+                <li className="mr-4">
+                    <Link to="/event" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Acara</Link>
+                </li>
+                <li className="mr-4">
+                    <Link to="/speaker" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Pembicara</Link>
+                </li>
+                <li className="mr-4">
+                    <Link to="/about" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Tentang</Link>
             <ul className="hidden lg:flex flex-grow justify-center list-none">
+
+            {/* Navigation for small screens */}
+            <div className="lg:hidden flex flex-grow justify-end items-center">
+                <button
+                    onClick={toggleNavbar}
+                    aria-label="Toggle navigation"
+                    className="relative "
+                >
+                        <img src={HamburgerIcon} alt="Menu Icon" className="w-6 h-6" />
+                </button>
+
+                {/* Mobile Menu */}
+                <div
+                    className={` justify-between fixed inset-y-0 right-0 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out z-50 ${isOpen ? 'translate-x-0' : 'translate-x-full'
+                        }`}
+                >
+
+                    <ul className="flex flex-col pt-10 px-6">
+                        <div className="pb-7 justify-between flex pr-10 lg:border-r border-solid border-grey">
+
+                        <img width={90} src={LogtengDevLogo} />
+                            <p onClick={toggleNavbar} className='text-xl'>X</p>
+                           
+                        </div>
+                        <li className="my-4">
+                            <Link to="/" onClick={toggleNavbar} className="text-sm hover:text-blue-600">
+                                Home
+                            </Link>
+                        </li>
+                        <li className="my-4">
+                            <Link to="/event" onClick={toggleNavbar} className="text-sm hover:text-blue-600">
+                                Acara
+                            </Link>
+                        </li>
+                        <li className="my-4">
+                            <Link to="/speaker" onClick={toggleNavbar} className="text-sm hover:text-blue-600">
+                                Pembicara
+                            </Link>
+                        </li>
+                        <li className="my-4">
+                            <Link to="/about" onClick={toggleNavbar} className="text-sm hover:text-blue-600">
+                                Tentang
+                            </Link>
+                        </li>
+
+
+                    </ul>
+
+                    <div className="  justify-center mt-20">
+                        <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="flex items-center bg-blue-600 px-4 py-3 mr-4 mx-7 my-9 rounded text-xs text-white">
+                            <img className="inline mr-3" width={21} onClick={toggleNavbar} src={TelegramIcon} alt="Telegram Icon" />Join Group
+                        </a>
+                        <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" rel="noopener noreferrer" className="flex items-center mx-7 my-9 text-xs  bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
+                            <img className="inline mr-3" width={21} onClick={toggleNavbar} src={GithubIcon} alt="GitHub Icon" />Contribute
+                        </a>
+                    </div>
+                </div>
+
+                {/* Overlay */}
+                {isOpen && (
+                    <div
+                        className="fixed inset-0 bg-black bg-opacity-50 z-40"
+                        onClick={toggleNavbar}
+                    />
+                )}
+            </div>
+
+            {/* Navigation for large screens */}
+            <ul className="hidden lg:flex flex-grow pl-10 list-none">
                 <li className="mr-8">
-                    <Link 
-                        to="/" 
-                        className="transition-all duration-200 border-b-2 border-transparent hover:border-black hover:scale-105"
-                    >
-                        Home
-                    </Link>
+                    <Link to="/" className="hover:text-blue-600">Home</Link>
                 </li>
                 <li className="mr-8">
-                    <Link 
-                        to="/event" 
-                        className="transition-all duration-200 border-b-2 border-transparent hover:border-black hover:scale-105"
-                    >
-                        Acara
-                    </Link>
+                    <Link to="/event" className="hover:text-blue-600">Acara</Link>
                 </li>
                 <li className="mr-8">
-                    <Link 
-                        to="/speaker" 
-                        className="transition-all duration-200 border-b-2 border-transparent hover:border-black hover:scale-105"
-                    >
-                        Pembicara
-                    </Link>
+                    <Link to="/speaker" className="hover:text-blue-600">Pembicara</Link>
                 </li>
                 <li className="mr-8">
-                    <Link 
-                        to="/about" 
-                        className="transition-all duration-200 border-b-2 border-transparent hover:border-black hover:scale-105"
-                    >
-                        Tentang
-                    </Link>
+                    <Link to="/about" className="hover:text-blue-600">Tentang</Link>
                 </li>
                 <li className="mr-8"><Link to="/event">Acara</Link></li>
                 <li className="mr-8"><Link to="/speaker">Pembicara</Link></li>
                 <li className="mr-8"><Link to="/about">Tentang</Link></li>
                 <li className="mr-8"><Link to="/contact">Kontak</Link></li>
             </ul>
+
             <CTAButtons />
-            <div className="lg:hidden flex flex-grow justify-end">
-                <img src={HamburgerIcon} alt="Menu" />
-            </div>
         </nav>
-    )
-}
\ No newline at end of file
+    );
+}
+}
diff --git a/src/components/ScrollToTopButton.jsx b/src/components/ScrollToTopButton.jsx
index daefbd1..e623888 100644
--- a/src/components/ScrollToTopButton.jsx
+++ b/src/components/ScrollToTopButton.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import  { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import { CgChevronDoubleUp } from "react-icons/cg";
 
@@ -58,11 +58,12 @@ const Wrapper = styled.div`
     z-index: 999;
     border-radius: 50%;
     box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
-    background-color: blue;
+    background-color: #2563eb;
 
     .up-icon {
       font-size: 1.5rem;
       transition: transform 0.5s;
+      color: white;
       &:hover {
         transform: translateY(-2px);
       }
diff --git a/src/pages/about/index.jsx b/src/pages/about/index.jsx
index a5c22af..c3ef5be 100644
--- a/src/pages/about/index.jsx
+++ b/src/pages/about/index.jsx
@@ -1,4 +1,5 @@
 import { Link } from "react-router-dom";
+import {Motion}  from "../framer-motion";// For Motion in Text
 
 export function AboutPage() {
     return (
@@ -11,11 +12,31 @@ export function AboutPage() {
                         </Link>
                         &gt; About
                     </div>
-                    <div className="font-bold lg:text-[48px] md:text-[32px] sm:text-[24px] text-[16px] mt-4">
+                    <Motion.div 
+                     initial={{ opacity: 0, x: -100 }}
+                     whileInView={{ opacity: 1, x: 0 }}
+                     viewport={{ once: true }}
+                     transition={{
+                       duration: 0.8,
+                       type: "spring",
+                       stiffness: 110,
+                       delay: 0,
+                     }}
+                    className="font-bold lg:text-[48px] md:text-[32px] sm:text-[24px] text-[16px] mt-4">
                         Tentang Komunitas Lombok Tengah Developer (Loteng Dev)
-                    </div>
+                    </Motion.div>
                     <hr className="border-1 border-grey w-full rounded-3xl md:mt-6 mt-2" />
-                    <div className="mt-5 mb-16 text-justify text-[18px]">
+                    <Motion.div
+                     initial={{ opacity: 0, x: -100 }}
+                     whileInView={{ opacity: 1, x: 0 }}
+                     viewport={{ once: true }}
+                     transition={{
+                       duration: 0.8,
+                       type: "spring",
+                       stiffness: 110,
+                       delay: 0,
+                     }}
+                     className="mt-5 mb-16 text-justify text-[18px]">
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex molestiae quos veritatis nemo sit praesentium aperiam quasi voluptatum quisquam unde delectus mollitia eveniet rem quia, saepe aliquam, consequuntur similique? Vitae.
                         <br />
                         <br />
@@ -25,7 +46,7 @@ export function AboutPage() {
                         <br /> 
                         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius temporibus vitae at. Consequatur reiciendis sit quidem, impedit, facere aperiam nostrum delectus dolore dolor quibusdam harum animi amet repellendus, sunt
                         voluptatibus.
-                    </div>
+                    </Motion.div>
                 </div>
             </div>
         </div>
diff --git a/src/pages/event/index.jsx b/src/pages/event/index.jsx
index bbbda85..1b2ae25 100644
--- a/src/pages/event/index.jsx
+++ b/src/pages/event/index.jsx
@@ -1,132 +1,271 @@
 import PlayIcon from '@/assets/icons/play.svg'
+import {Motion}  from "../framer-motion";// For Motion in Text
 
 export function EventPage() {
     return (
         <div className="bg-[#F5F5F5] pt-14">
             <header className="text-center w-full mb-16">
-                <h1 className="text-[20px] font-bold text-[color:#41B883] ">
+                <Motion.h1 
+                 initial={{ opacity: 0, x: -100 }}
+                 whileInView={{ opacity: 1, x: 0 }}
+                 viewport={{ once: true }}
+                 transition={{
+                   duration: 0.8,
+                   type: "spring",
+                   stiffness: 110,
+                   delay: 0,
+                 }}
+                className="text-[20px] font-bold text-[color:#41B883] ">
                     Semua Acara
-                </h1>
-                <p className="text-[32px] font-bold">
+                </Motion.h1>
+                <Motion.p 
+                 initial={{ opacity: 0, x: -100 }}
+                 whileInView={{ opacity: 1, x: 0 }}
+                 viewport={{ once: true }}
+                 transition={{
+                   duration: 0.8,
+                   type: "spring",
+                   stiffness: 110,
+                   delay: 0,
+                 }}
+                className="text-[32px] font-bold">
                     yang telah terlaksana
-                </p>
+                </Motion.p>
             </header>
             <section className="container mx-auto md:mt-8 mt-6">
                 <div className="w-full h-auto grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4 gap-y-16 content-around">
                     <div className="flex items-center justify-center">
                         <div className="md:w-[320px] w-[280px] h-auto">
                             <a href="">
-                                <div
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="rounded-[24px] overflow-hidden relative">
                                     <img src="./images/event.png" className="w-full relative" alt="images" />
                                         <div
                                             className="absolute z-10 top-0 bottom-0 left-0 right-0 bg-[rgba(255,255,255,.5)] sm:hover:opacity-100 sm:opacity-0 opacity-100 transition-all flex justify-center items-center">
                                             <img src={PlayIcon} className="w-[63px] h-[64px]" alt=" play " />
                                         </div>
-                                </div>
-                                <div
+                                </Motion.div>
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="w-full font-bold md:text-left text-center md:text-[20px] text-[18px] mt-[14px] ">
                                     Lotengdev Online Meetup #2: Prepare for Hacktoberfest
-                                </div>
+                                </Motion.div>
                             </a>
                         </div>
                     </div>
                     <div className="flex items-center justify-center">
                         <div className="md:w-[320px] w-[280px] h-auto">
                             <a href="">
-                                <div
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="rounded-[24px] overflow-hidden relative">
                                     <img src="./images/event.png" className="w-full relative" alt="images" />
                                         <div
                                             className="absolute top-0 bottom-0 left-0 right-0 bg-[rgba(255,255,255,.5)] sm:hover:opacity-100 sm:opacity-0 opacity-100 transition-all flex justify-center items-center">
                                             <img src={PlayIcon} className="w-[63px] h-[64px]" alt=" play " />
                                         </div>
-                                </div>
-                                <div
+                                </Motion.div>
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="w-full font-bold md:text-left text-center md:text-[20px] text-[18px] mt-[14px] ">
                                     Lotengdev Online Meetup #2: Prepare for Hacktoberfest
-                                </div>
+                                </Motion.div>
                             </a>
                         </div>
                     </div>
                     <div className="flex items-center justify-center">
                         <div className="md:w-[320px] w-[280px] h-auto">
                             <a href="">
-                                <div
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="rounded-[24px] overflow-hidden relative">
                                     <img src="./images/event.png" className="w-full relative" alt="images" />
                                         <div
                                             className="absolute top-0 bottom-0 left-0 right-0 bg-[rgba(255,255,255,.5)] sm:hover:opacity-100 sm:opacity-0 opacity-100 transition-all flex justify-center items-center">
                                             <img src={PlayIcon} className="w-[63px] h-[64px]" alt=" play " />
                                         </div>
-                                </div>
-                                <div
+                                </Motion.div>
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="w-full font-bold md:text-left text-center md:text-[20px] text-[18px] mt-[14px] ">
                                     Lotengdev Online Meetup #2: Prepare for Hacktoberfest
-                                </div>
+                                </Motion.div>
                             </a>
                         </div>
                     </div>
                     <div className="flex items-center justify-center">
                         <div className="md:w-[320px] w-[280px] h-auto">
                             <a href="">
-                                <div
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="rounded-[24px] overflow-hidden relative">
                                     <img src="./images/event.png" className="w-full relative" alt="images" />
                                         <div
                                             className="absolute top-0 bottom-0 left-0 right-0 bg-[rgba(255,255,255,.5)] sm:hover:opacity-100 sm:opacity-0 opacity-100 transition-all flex justify-center items-center">
                                             <img src={PlayIcon} className="w-[63px] h-[64px]" alt=" play " />
                                         </div>
-                                </div>
-                                <div
+                                </Motion.div>
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="w-full font-bold md:text-left text-center md:text-[20px] text-[18px] mt-[14px] ">
                                     Lotengdev Online Meetup #2: Prepare for Hacktoberfest
-                                </div>
+                                </Motion.div>
                             </a>
                         </div>
                     </div>
                     <div className="flex items-center justify-center">
                         <div className="md:w-[320px] w-[280px] h-auto">
                             <a href="">
-                                <div
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="rounded-[24px] overflow-hidden relative">
                                     <img src="./images/event.png" className="w-full relative" alt="images" />
                                         <div
                                             className="absolute top-0 bottom-0 left-0 right-0 bg-[rgba(255,255,255,.5)] sm:hover:opacity-100 sm:opacity-0 opacity-100 transition-all flex justify-center items-center">
                                             <img src={PlayIcon} className="w-[63px] h-[64px]" alt=" play " />
                                         </div>
-                                </div>
-                                <div
+                                </Motion.div>
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="w-full font-bold md:text-left text-center md:text-[20px] text-[18px] mt-[14px] ">
                                     Lotengdev Online Meetup #2: Prepare for Hacktoberfest
-                                </div>
+                                </Motion.div>
                             </a>
                         </div>
                     </div>
                     <div className="flex items-center justify-center">
                         <div className="md:w-[320px] w-[280px] h-auto">
                             <a href="">
-                                <div
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="rounded-[24px] overflow-hidden relative">
                                     <img src="./images/event.png" className="w-full relative" alt="images" />
                                         <div
                                             className="absolute top-0 bottom-0 left-0 right-0 bg-[rgba(255,255,255,.5)] sm:hover:opacity-100 sm:opacity-0 opacity-100 transition-all flex justify-center items-center">
                                             <img src={PlayIcon} className="w-[63px] h-[64px]" alt=" play " />
                                         </div>
-                                </div>
-                                <div
+                                </Motion.div>
+                                <Motion.div
+                                 initial={{ opacity: 0, x: -100 }}
+                                 whileInView={{ opacity: 1, x: 0 }}
+                                 viewport={{ once: true }}
+                                 transition={{
+                                   duration: 0.8,
+                                   type: "spring",
+                                   stiffness: 110,
+                                   delay: 0,
+                                 }}
                                     className="w-full font-bold md:text-left text-center md:text-[20px] text-[18px] mt-[14px] ">
                                     Lotengdev Online Meetup #2: Prepare for Hacktoberfest
-                                </div>
+                                </Motion.div>
                             </a>
                         </div>
                     </div>
                 </div>
             </section>
             <section className="container pt-20 pb-20 mx-auto text-center ">
-                <div className="lg:text-[32px] text-[24px] font-bold ">
+                <Motion.div 
+                 initial={{ opacity: 0, x: -100 }}
+                 whileInView={{ opacity: 1, x: 0 }}
+                 viewport={{ once: true }}
+                 transition={{
+                   duration: 0.8,
+                   type: "spring",
+                   stiffness: 110,
+                   delay: 0,
+                 }}
+                className="lg:text-[32px] text-[24px] font-bold ">
                     Next meetup kita mau bahas <br /> apa nih?
-                </div>
+                </Motion.div>
                 <a href="https://github.com/Loteng-Dev/MeetupTopics/issues "
                     className="text-white bg-[#007BFF] font-normal text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2 mt-[32px] ">
                     + Kirim ide topik
diff --git a/src/pages/framer-motion/index.tsx b/src/pages/framer-motion/index.tsx
new file mode 100644
index 0000000..10befcf
--- /dev/null
+++ b/src/pages/framer-motion/index.tsx
@@ -0,0 +1,11 @@
+import { MotionA, MotionButton, MotionDiv, MotionH1, MotionH2, MotionP, MotionSection } from "./util";
+
+export const Motion = {
+  div: MotionDiv,
+  a: MotionA,
+  p: MotionP,
+  h1: MotionH1,
+  h2: MotionH2,
+  button: MotionButton,
+  section: MotionSection,
+};
\ No newline at end of file
diff --git a/src/pages/framer-motion/util.tsx b/src/pages/framer-motion/util.tsx
new file mode 100644
index 0000000..a36cdfe
--- /dev/null
+++ b/src/pages/framer-motion/util.tsx
@@ -0,0 +1,39 @@
+'use client'
+import * as React from "react";
+import { motion, HTMLMotionProps } from "framer-motion";
+
+type MotionTags = "div" | "a" | "p" | "h1" | "h2" | "button" | "section";
+
+type MotionComponent<T extends MotionTags> = React.ForwardRefRenderFunction<
+  Element,
+  HTMLMotionProps<T>
+>;
+
+export const createMotionComponent = <T extends MotionTags>(
+  tag: T
+): MotionComponent<T> => {
+  const MotionTag = motion[tag] as any;
+
+  const MotionComponent: MotionComponent<T> = (
+    { className, children, ...props },
+    ref
+  ) => {
+    return (
+      <MotionTag className={className} {...props} ref={ref}>
+        {children}
+      </MotionTag>
+    );
+  };
+
+  MotionComponent.displayName = `Motion.${tag}`;
+
+  return MotionComponent;
+};
+
+export const MotionDiv = React.forwardRef(createMotionComponent("div"));
+export const MotionA = React.forwardRef(createMotionComponent("a"));
+export const MotionP = React.forwardRef(createMotionComponent("p"));
+export const MotionH1 = React.forwardRef(createMotionComponent("h1"));
+export const MotionH2 = React.forwardRef(createMotionComponent("h2"));
+export const MotionButton = React.forwardRef(createMotionComponent("button"));
+export const MotionSection = React.forwardRef(createMotionComponent("section"));
\ No newline at end of file
diff --git a/src/pages/speaker/index.jsx b/src/pages/speaker/index.jsx
index 0a4ce8d..811e00d 100644
--- a/src/pages/speaker/index.jsx
+++ b/src/pages/speaker/index.jsx
@@ -1,17 +1,38 @@
 import LinkedinIcon from '@/assets/icons/linkedin.svg';
 import GithubIcon from '@/assets/icons/github.svg';
 import WebsiteIcon from '@/assets/icons/website.svg';
+import {Motion}  from "../framer-motion";// For Motion in Text
 
 export function SpeakerPage() {
     return (
         <div className="bg-[#F5F5F5] pt-14">
             <section className="text-center w-full">
-                <p className="text-[20px] font-bold text-[color:#41B883] ">
+                <Motion.p 
+                initial={{ opacity: 0, x: -100 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 0.8,
+                  type: "spring",
+                  stiffness: 110,
+                  delay: 0,
+                }}
+                className="text-[20px] font-bold text-[color:#41B883] ">
                     Semua Pembicara
-                </p>
-                <p className="text-[32px] font-bold mt-5">
+                </Motion.p>
+                <Motion.p 
+                initial={{ opacity: 0, x: -100 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 0.8,
+                  type: "spring",
+                  stiffness: 110,
+                  delay: 0,
+                }}
+                className="text-[32px] font-bold mt-5">
                     yang telah berbagi di <br/> acara Lotengdev
-                </p>
+                </Motion.p>
             </section>
             <section className="container mx-auto">
                 <div
@@ -24,7 +45,17 @@ export function SpeakerPage() {
                         { name: "Floyd Miles", imgSrc: "./images/Frame 23.png" },
                         { name: "Kathryn Murphy", imgSrc: "./images/Frame 24.png" },
                     ].map((speaker, index) => (
-                        <div className="flex items-center justify-center" key={index}>
+                        <Motion.div 
+                        initial={{ opacity: 0, x: -100 }}
+                     whileInView={{ opacity: 1, x: 0 }}
+                     viewport={{ once: true }}
+                     transition={{
+                       duration: 0.8,
+                       type: "spring",
+                       stiffness: 110,
+                       delay: 0,
+                     }}
+                        className="flex items-center justify-center" key={index}>
                             <div className="w-[260px] h-auto">
                                 <div className="w-[260px] h-[260px] rounded-[24px] overflow-hidden">
                                     <img
@@ -48,14 +79,24 @@ export function SpeakerPage() {
                                     </a>
                                 </div>
                             </div>
-                        </div>
+                        </Motion.div>
                     ))}
                 </div>
             </section>
             <section className="container pt-20 pb-20 mx-auto text-center">
-                <div className="text-[32px] font-bold">
+                <Motion.div 
+                initial={{ opacity: 0, x: -100 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 0.8,
+                  type: "spring",
+                  stiffness: 110,
+                  delay: 0,
+                }}
+                className="text-[32px] font-bold">
                     Tertarik menjadi pembicara di <br/> acara Lotengdev ?
-                </div>
+                </Motion.div>
                 <a href="https://github.com/Loteng-Dev/MeetupTopics/issues"
                     className="text-white bg-[#007BFF]  font-normal text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2 mt-[32px]">
                     + Kirim ide topik