Index: frontend/src/app/layout.tsx
===================================================================
--- frontend/src/app/layout.tsx	(revision b8093a091d45f33bab33deb8ff2fffc4734972c0)
+++ frontend/src/app/layout.tsx	(revision b8093a091d45f33bab33deb8ff2fffc4734972c0)
@@ -0,0 +1,44 @@
+"use client";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import { config } from '@fortawesome/fontawesome-svg-core';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../i18n';
+import { ThemeProvider } from '../components/theme-provider';
+import { ThemeToggle } from '../components/theme-toggle';
+import ContactBubble from '../components/contact-bubble';
+
+config.autoAddCss = false;
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+          <I18nextProvider i18n={i18n}>
+            <div className="fixed top-4 right-4 z-50">
+              <ThemeToggle />
+            </div>
+            <div className="mx-auto max-w-6xl px-4">{children}</div>
+            <ContactBubble />
+          </I18nextProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
