diff --git a/app/layout.jsx b/app/layout.jsx
index 2b04426..756c3b3 100644
--- a/app/layout.jsx
+++ b/app/layout.jsx
@@ -1,4 +1,3 @@
-import dynamic from "next/dynamic";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
 import { config } from "@fortawesome/fontawesome-svg-core";
@@ -6,15 +5,20 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
 config.autoAddCss = false;
 import "./nprogress.css";
 import { Analytics } from "@vercel/analytics/react";
+import Chat from "@/components/Chat";
+import ClientTopProgressBar from "@/components/ClientTopProgressBar";
 
 export const metadata = {
-	title: "Alvalens | Portofolio",
-	description:
+    title: "Alvalens | Portofolio",
+
+    description:
 		"My name is Alvalens, I'm a web developer and I'm passionate about it. I'm currently studying at Universitas Negeri Malang.",
-	author: "Alvalen Shafelbilyunazra",
-	siteUrl: "https://www.alvalens.my.id",
-	applicationName: "Alvalens",
-	keywords: [
+
+    author: "Alvalen Shafelbilyunazra",
+    siteUrl: "https://www.alvalens.my.id",
+    applicationName: "Alvalens",
+
+    keywords: [
 		"alvalens",
 		"alvalen",
 		"alvalen shafel",
@@ -25,7 +29,8 @@ export const metadata = {
 		"alvalen porto",
 		"alvalen um",
 	],
-	openGraph: {
+
+    openGraph: {
 		type: "website",
 		url: "https://www.alvalens.my.id",
 		title: "Alvalens | Portofolio",
@@ -40,23 +45,14 @@ export const metadata = {
 			},
 		],
 		site_name: "Alvalens | Portofolio",
-	},
+	}
 };
 
-
-import Chat from "@/components/Chat";
-
-const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
-	ssr: false,
-});
-
-
-
 export default function RootLayout({ children }) {
 	return (
 		<html lang="en">
 			<body>
-				<TopProgressBar />
+				<ClientTopProgressBar />
 				<Navbar />
 				{children}
 				<Chat />
diff --git a/components/ClientTopProgressBar.jsx b/components/ClientTopProgressBar.jsx
new file mode 100644
index 0000000..08d6a62
--- /dev/null
+++ b/components/ClientTopProgressBar.jsx
@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
+	ssr: false,
+});
+
+export default function ClientTopProgressBar() {
+	return <TopProgressBar />;
+}