diff --git a/app/layout.tsx b/app/layout.tsx
index bcf6525..a4990a6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,19 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
+import PlausibleProvider from "next-plausible";
 import "./globals.css";
+import { cn } from "@/lib/utils";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
+export const viewport: Viewport = {
+  colorScheme: "dark",
+  themeColor: [
+    //{ media: "(prefers-color-scheme: light)", color: "#f5f5f5" },
+    //{ media: "(prefers-color-scheme: dark)", color: "#171717" },
+    { color: "#052e16" },
+  ],
+};
 export const metadata: Metadata = {
   title: "Track Every Day!",
   description: "A web app for tracking habits, activities and vices.",
@@ -15,8 +25,24 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className="scroll-smooth">
+      <head>
+        <PlausibleProvider
+          domain="trackevery.day"
+          customDomain="https://analytics.schulze.network"
+          selfHosted={true}
+          enabled={true}
+          trackOutboundLinks={true}
+        />
+      </head>
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          inter.variable
+        )}
+      >
+        {children}
+      </body>
     </html>
   );
 }
