diff --git a/app/layout.tsx b/app/layout.tsx
index 9777007..ef41878 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,7 @@ import { Metadata } from "next";
 import { Providers } from "./providers";
 import LoadScript from "@/utils/global";
 import { type ReactNode } from "react";
+import LoadTawk from "@/components/ui/tawkto/load-tawk";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -56,6 +57,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
           <main className="">{children}</main>
         </Providers>
+        <LoadTawk />
       </body>
     </html>
   );
diff --git a/components/ui/tawkto/load-tawk.tsx b/components/ui/tawkto/load-tawk.tsx
new file mode 100644
index 0000000..6e6e58a
--- /dev/null
+++ b/components/ui/tawkto/load-tawk.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { useEffect } from "react";
+
+const LoadTawk = () => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://embed.tawk.to/5d43069be5ae967ef80df561/default"; // GANTI
+    script.async = true;
+    script.charset = "UTF-8";
+    script.setAttribute("crossorigin", "*");
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return null;
+};
+
+export default LoadTawk;