diff --git a/docs/offlegacy.org/src/components/demo-playground.tsx b/docs/offlegacy.org/src/components/demo-playground.tsx
index 10a461f..dd2e8a9 100644
--- a/docs/offlegacy.org/src/components/demo-playground.tsx
+++ b/docs/offlegacy.org/src/components/demo-playground.tsx
@@ -2,9 +2,8 @@
 
 import { highlight, Pre, type HighlightedCode } from "codehike/code";
 import { DemoButton } from "./demo-button";
-import { useTheme } from "nextra-theme-docs";
-import { useSystemDarkMode } from "../logo/useSystemDarkMode";
-import { useEffect, useState } from "react";
+import { Link, useTheme } from "nextra-theme-docs";
+import { useLayoutEffect, useState } from "react";
 import { motion } from "motion/react";
 import { Toaster } from "sonner";
 
@@ -31,13 +30,11 @@ function App() {
 }`;
 
 export function DemoCode() {
-  const { theme } = useTheme();
-  const isSystemDarkMode = useSystemDarkMode();
-  const resolvedTheme = theme === "system" ? (isSystemDarkMode ? "dark" : "light") : theme;
+  const { resolvedTheme } = useTheme();
   const codeTheme = resolvedTheme === "dark" ? "github-dark" : "github-light";
   const [highlighted, setHighlighted] = useState<HighlightedCode | null>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     highlight(
       {
         value: code,
@@ -66,7 +63,9 @@ export function DemoCode() {
       <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
         <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50">
           <div className="flex items-center space-x-2">
-            <span className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">example-basic.tsx</span>
+            <Link href="/docs/basic-example" className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+              example-basic.tsx
+            </Link>
           </div>
         </div>
         <div className="relative overflow-x-auto p-6">
diff --git a/docs/offlegacy.org/src/components/home-page.tsx b/docs/offlegacy.org/src/components/home-page.tsx
index 4dbb6a0..812721c 100644
--- a/docs/offlegacy.org/src/components/home-page.tsx
+++ b/docs/offlegacy.org/src/components/home-page.tsx
@@ -46,7 +46,7 @@ export default async function HomePage({
             <InstallCopyButton />
           </div>
         </div>
-        <div className="min-h-[572.75px]">
+        <div className="min-h-[572.75px] w-full max-w-[723px]">
           <DemoCode />
         </div>
       </div>
diff --git a/docs/offlegacy.org/src/content/en/index.mdx b/docs/offlegacy.org/src/content/en/index.mdx
index ee84f82..8d2d4cd 100644
--- a/docs/offlegacy.org/src/content/en/index.mdx
+++ b/docs/offlegacy.org/src/content/en/index.mdx
@@ -7,7 +7,7 @@ import HomePage from "@/components/home-page";
 <HomePage
   description="Comprehensive solution for event tracking in React applications"
   startedText="Get Started"
-  featureSectionTitle="Event tracking paradigm presented by Event Tracker"
+  featureSectionTitle="Focus on 'what' to track, not 'how' to track it!"
   featureSectionContents={[
     {
       title: "Declarative API",
diff --git a/docs/offlegacy.org/src/logo/index.tsx b/docs/offlegacy.org/src/logo/index.tsx
index 45f58f2..5071c11 100644
--- a/docs/offlegacy.org/src/logo/index.tsx
+++ b/docs/offlegacy.org/src/logo/index.tsx
@@ -2,8 +2,7 @@
 
 import Image from "next/image";
 import { useTheme } from "nextra-theme-docs";
-
-import { useSystemDarkMode } from "./useSystemDarkMode";
+import { useLayoutEffect, useState } from "react";
 
 interface LogoProps {
   size?: number;
@@ -13,12 +12,12 @@ const DARK_LOGO_PATH = "/img/dark-logo.png";
 const LIGHT_LOGO_PATH = "/img/light-logo.png";
 
 export const Logo = ({ size = 30 }: LogoProps) => {
-  const isSystemDarkMode = useSystemDarkMode();
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
+  const [src, setSrc] = useState(LIGHT_LOGO_PATH);
 
-  const isDarkMode = theme === "system" ? isSystemDarkMode : theme === "dark";
+  useLayoutEffect(() => {
+    setSrc(resolvedTheme === "dark" ? DARK_LOGO_PATH : LIGHT_LOGO_PATH);
+  }, [resolvedTheme]);
 
-  return (
-    <Image src={isDarkMode ? DARK_LOGO_PATH : LIGHT_LOGO_PATH} alt="event-tracker logo" width={size} height={size} />
-  );
+  return <Image src={src} alt="event-tracker logo" width={size} height={size} />;
 };
diff --git a/docs/offlegacy.org/src/logo/useSystemDarkMode.ts b/docs/offlegacy.org/src/logo/useSystemDarkMode.ts
deleted file mode 100644
index e3b3cd5..0000000
--- a/docs/offlegacy.org/src/logo/useSystemDarkMode.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect, useState } from "react";
-
-const DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
-
-export const useSystemDarkMode = () => {
-  const [isSystemDarkMode, setIsSystemDarkMode] = useState(false);
-
-  useEffect(() => {
-    const matchMedia = window.matchMedia(DARK_MODE_QUERY);
-    setIsSystemDarkMode(matchMedia.matches);
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      setIsSystemDarkMode(e.matches);
-    };
-
-    matchMedia.addEventListener("change", handleChange);
-
-    return () => {
-      matchMedia.removeEventListener("change", handleChange);
-    };
-  }, []);
-
-  return isSystemDarkMode;
-};