diff --git a/src/app/elements.tsx b/src/app/elements.tsx
index 8b6beb0..6c5e012 100644
--- a/src/app/elements.tsx
+++ b/src/app/elements.tsx
@@ -1,13 +1,17 @@
-"use client";
+import { Suspense } from "react";
 
-import { Nav } from "@/components/Nav";
+import { Nav } from "@/components/Nav/Nav";
+import { NavClient } from "@/components/Nav/NavClient";
 
 import { Component } from "@/typings/component";
 
 export const Elements: Component = ({ children }) => {
 	return (
 		<>
-			<Nav />
+			<Suspense fallback={<Nav pathname="" />}>
+				<NavClient />
+			</Suspense>
+
 			{children}
 		</>
 	);
diff --git a/src/components/Nav.tsx b/src/components/Nav/Nav.tsx
similarity index 87%
rename from src/components/Nav.tsx
rename to src/components/Nav/Nav.tsx
index 442bfd6..22bbf19 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav/Nav.tsx
@@ -1,7 +1,5 @@
-"use client";
-
 import NextLink from "next/link";
-import { usePathname } from "next/navigation";
+import { FC } from "react";
 
 import { Button } from "@nextui-org/button";
 import { Link } from "@nextui-org/link";
@@ -12,13 +10,11 @@ import {
 	NavbarItem
 } from "@nextui-org/navbar";
 
-import { Component } from "@/typings/component";
-
 // import { Search } from "./Search";
 
 export const navHeight = 64;
 
-export const Nav: Component = () => {
+export const Nav: FC<{ pathname: string }> = ({ pathname }) => {
 	const navItems = [
 		{
 			title: "Trending",
@@ -34,8 +30,6 @@ export const Nav: Component = () => {
 		}
 	];
 
-	const pathname = usePathname();
-
 	return (
 		<Navbar>
 			<NavbarBrand>
diff --git a/src/components/Nav/NavClient.tsx b/src/components/Nav/NavClient.tsx
new file mode 100644
index 0000000..3b034dd
--- /dev/null
+++ b/src/components/Nav/NavClient.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { FC } from "react";
+
+import { Nav } from "./Nav";
+
+export const NavClient: FC = () => {
+	const pathname = usePathname();
+
+	return <Nav pathname={pathname} />;
+};