diff --git a/src/app/[orgId]/sites/[niceId]/components/ClientLayout.tsx b/src/app/[orgId]/sites/[niceId]/components/ClientLayout.tsx
new file mode 100644
index 00000000..a06b7409
--- /dev/null
+++ b/src/app/[orgId]/sites/[niceId]/components/ClientLayout.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { SidebarNav } from "@app/components/sidebar-nav";
+import { useSiteContext } from "@app/hooks/useSiteContext";
+
+const sidebarNavItems = [
+    {
+        title: "Profile",
+        href: "/{orgId}/sites/{niceId}",
+    },
+    {
+        title: "Appearance",
+        href: "/{orgId}/sites/{niceId}/appearance",
+    },
+    {
+        title: "Notifications",
+        href: "/{orgId}/sites/{niceId}/notifications",
+    },
+    {
+        title: "Display",
+        href: "/{orgId}/sites/{niceId}/display",
+    },
+];
+
+export function ClientLayout({ isCreate, children }: { isCreate: boolean; children: React.ReactNode }) {
+    const { site } = useSiteContext();
+    return (<div className="hidden space-y-6 0 pb-16 md:block">
+        <div className="space-y-0.5">
+            <h2 className="text-2xl font-bold tracking-tight">
+                {isCreate
+                    ? "New Site"
+                    : site?.name + " Settings"}
+            </h2>
+            <p className="text-muted-foreground">
+                {isCreate
+                    ? "Create a new site"
+                    : "Configure the settings on your site: " +
+                    site?.name || ""}
+                .
+            </p>
+        </div>
+        <div className="flex flex-col space-y-6 lg:flex-row lg:space-x-12 lg:space-y-0">
+            <aside className="-mx-4 lg:w-1/5">
+                <SidebarNav
+                    items={sidebarNavItems}
+                    disabled={isCreate}
+                />
+            </aside>
+            <div className="flex-1 lg:max-w-2xl">
+                {children}
+            </div>
+        </div>
+    </div>);
+}
\ No newline at end of file
diff --git a/src/app/[orgId]/sites/[niceId]/layout.tsx b/src/app/[orgId]/sites/[niceId]/layout.tsx
index a2278f4d..d54a7571 100644
--- a/src/app/[orgId]/sites/[niceId]/layout.tsx
+++ b/src/app/[orgId]/sites/[niceId]/layout.tsx
@@ -13,31 +13,13 @@ import Link from "next/link";
 import { ArrowLeft, ChevronLeft } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "@app/hooks/use-toast";
+import { ClientLayout } from "./components/ClientLayout";
 
 export const metadata: Metadata = {
     title: "Forms",
     description: "Advanced form example using react-hook-form and Zod.",
 };
 
-const sidebarNavItems = [
-    {
-        title: "Profile",
-        href: "/{orgId}/sites/{niceId}",
-    },
-    {
-        title: "Appearance",
-        href: "/{orgId}/sites/{niceId}/appearance",
-    },
-    {
-        title: "Notifications",
-        href: "/{orgId}/sites/{niceId}/notifications",
-    },
-    {
-        title: "Display",
-        href: "/{orgId}/sites/{niceId}/display",
-    },
-];
-
 interface SettingsLayoutProps {
     children: React.ReactNode;
     params: { niceId: string; orgId: string };
@@ -88,33 +70,12 @@ export default async function SettingsLayout({
                 </Link>
             </div>
 
-            <div className="hidden space-y-6 0 pb-16 md:block">
-                <div className="space-y-0.5">
-                    <h2 className="text-2xl font-bold tracking-tight">
-                        {params.niceId == "create"
-                            ? "New Site"
-                            : site?.name + " Settings" || "Site Settings"}
-                    </h2>
-                    <p className="text-muted-foreground">
-                        {params.niceId == "create"
-                            ? "Create a new site"
-                            : "Configure the settings on your site: " +
-                            site?.name || ""}
-                        .
-                    </p>
-                </div>
-                <div className="flex flex-col space-y-6 lg:flex-row lg:space-x-12 lg:space-y-0">
-                    <aside className="-mx-4 lg:w-1/5">
-                        <SidebarNav
-                            items={sidebarNavItems}
-                            disabled={params.niceId == "create"}
-                        />
-                    </aside>
-                    <div className="flex-1 lg:max-w-2xl">
-                        <SiteProvider site={site}>{children}</SiteProvider>
-                    </div>
-                </div>
-            </div>
+            <SiteProvider site={site}>                
+                <ClientLayout
+                isCreate={params.niceId === "create"}
+            >
+                {children}
+            </ClientLayout></SiteProvider>
         </>
     );
 }
diff --git a/src/app/[orgId]/sites/[niceId]/page.tsx b/src/app/[orgId]/sites/[niceId]/page.tsx
index c6147ec8..43bb4d8f 100644
--- a/src/app/[orgId]/sites/[niceId]/page.tsx
+++ b/src/app/[orgId]/sites/[niceId]/page.tsx
@@ -8,23 +8,23 @@ export default function SettingsProfilePage({
 }: {
     params: { niceId: string };
 }) {
-    const isCreateForm = params.niceId === "create";
+    const isCreate = params.niceId === "create";
 
     return (
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-medium">
-                    {isCreateForm ? "Create Site" : "Profile"}
+                    {isCreate ? "Create Site" : "Profile"}
                 </h3>
                 <p className="text-sm text-muted-foreground">
-                    {isCreateForm
+                    {isCreate
                         ? "Create a new site for your profile."
                         : "This is how others will see you on the site."}
                 </p>
             </div>
             <Separator />
 
-            {isCreateForm ? <CreateSiteForm /> : <GeneralForm />}
+            {isCreate ? <CreateSiteForm /> : <GeneralForm />}
         </div>
     );
 }