diff --git a/src/app/_components/ClientRootComponents.tsx b/src/app/_components/ClientRootComponents.tsx
new file mode 100644
index 00000000..cd76b6df
--- /dev/null
+++ b/src/app/_components/ClientRootComponents.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import { Toaster } from '@/components/ui/Toaster'
+import { useInstallJuicecrowdWindowObject } from '@/hooks/useInstallJuicecrowdWindowObject'
+
+/**
+ * Root components that are only rendered on the client.
+ */
+export const ClientRootComponents = () => {
+ useInstallJuicecrowdWindowObject()
+ return
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 00000000..ed622872
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import { fonts } from '@/lib/fonts'
+import '../styles/globals.scss'
+import { ClientRootComponents } from './_components/ClientRootComponents'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 00000000..a9d33314
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,10 @@
+import { LandingPage } from '@/components/Landing'
+import { Layout } from '@/components/layout'
+
+export default function Page() {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/ConnectKitButton.tsx b/src/components/ConnectKitButton.tsx
index 1e3fdd9d..5d052d30 100644
--- a/src/components/ConnectKitButton.tsx
+++ b/src/components/ConnectKitButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import { ConnectKitButton as _ConnectKitButton } from 'connectkit'
import { Button, buttonVariants } from './ui/Button'
import { VariantProps } from 'class-variance-authority'
diff --git a/src/components/Landing/components/JuicecrowdCTA.tsx b/src/components/Landing/components/JuicecrowdCTA.tsx
index f4059a2e..edf8b746 100644
--- a/src/components/Landing/components/JuicecrowdCTA.tsx
+++ b/src/components/Landing/components/JuicecrowdCTA.tsx
@@ -1,14 +1,13 @@
+'use client'
+
import { Link } from '@/components/Link'
import { EthereumIconFilled } from '@/components/icon/EthereumIconFilled'
import { Button } from '@/components/ui/Button'
import {
JC01SubmissionsClosed,
- JC01_DATES,
JC01_DATE_STRINGS,
} from '@/lib/constants/crowds'
-import { dateToCountdownString } from '@/lib/date/format'
import Image from 'next/image'
-import { useEffect, useState } from 'react'
import { twMerge } from 'tailwind-merge'
export type JuicecrowdCTAProps = {
diff --git a/src/components/Landing/components/StayInLoopSection.tsx b/src/components/Landing/components/StayInLoopSection.tsx
index 21ae4fc8..7ec39770 100644
--- a/src/components/Landing/components/StayInLoopSection.tsx
+++ b/src/components/Landing/components/StayInLoopSection.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import { useState } from 'react'
import { Input } from '@/components/Input'
import { twMerge } from 'tailwind-merge'
diff --git a/src/components/layout/AppProvider.tsx b/src/components/layout/AppProvider.tsx
index bf7036d5..f6457a5f 100644
--- a/src/components/layout/AppProvider.tsx
+++ b/src/components/layout/AppProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import {
JBProjectMetadataProvider,
_JBProjectMetadata,
diff --git a/src/components/layout/Navbar/components/MinimalNavbar.tsx b/src/components/layout/Navbar/components/MinimalNavbar.tsx
index 3c22ea30..6ce8bca3 100644
--- a/src/components/layout/Navbar/components/MinimalNavbar.tsx
+++ b/src/components/layout/Navbar/components/MinimalNavbar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import { ConnectKitButton } from '@/components/ConnectKitButton'
import { Button } from '@/components/ui/Button'
import { useJbProject } from '@/hooks/useJbProject'
diff --git a/src/components/layout/Navbar/components/MobileNavbar.tsx b/src/components/layout/Navbar/components/MobileNavbar.tsx
index 84416b0b..f5631443 100644
--- a/src/components/layout/Navbar/components/MobileNavbar.tsx
+++ b/src/components/layout/Navbar/components/MobileNavbar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import { Link } from '@/components/Link'
import Logo from '@/components/Logo'
import { CoinLogo } from '@/components/icon/CoinLogo'
diff --git a/src/hooks/useInstallJuicecrowdWindowObject.ts b/src/hooks/useInstallJuicecrowdWindowObject.ts
new file mode 100644
index 00000000..7680382f
--- /dev/null
+++ b/src/hooks/useInstallJuicecrowdWindowObject.ts
@@ -0,0 +1,10 @@
+'use client'
+
+import { installJuicecrowdWindowObject } from '@/lib/featureFlags'
+import { useEffect } from 'react'
+
+export const useInstallJuicecrowdWindowObject = () => {
+ useEffect(() => {
+ installJuicecrowdWindowObject()
+ }, [])
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
deleted file mode 100644
index e0b299b1..00000000
--- a/src/pages/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { LandingPage } from '@/components/Landing'
-import { Layout } from '@/components/layout'
-import { AppProvider } from '@/components/layout/AppProvider'
-
-export function Page() {
- return (
-
-
-
-
-
- )
-}
-
-export default Page