diff --git a/example/app/app/+html.tsx b/example/app/app/+html.tsx
index d076575..a88a856 100644
--- a/example/app/app/+html.tsx
+++ b/example/app/app/+html.tsx
@@ -1,6 +1,5 @@
 import { ScrollViewStyleReset } from "expo-router/html";
 import { WebProvider } from "@/store/WebProvider";
-import { MAX_WIDTH } from "@/constants/sizes";
 
 // This file is web-only and used to configure the root HTML for every
 // web page during static rendering.
@@ -17,6 +16,12 @@ export default function Root({ children }: { children: React.ReactNode }) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
         />
 
+        {/* This CSP used to control which domain could embed this App. For now, we're using this App in doc site. */}
+        <meta
+          httpEquiv="Content-Security-Policy"
+          content="frame-ancestors 'self' https://app.rn-carousel.dev http://localhost:8002"
+        />
+
         {/*
           Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
           However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
@@ -26,7 +31,7 @@ export default function Root({ children }: { children: React.ReactNode }) {
         {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
         <style
           dangerouslySetInnerHTML={{
-            __html: viewportStyles,
+            __html: ``,
           }}
         />
 
@@ -38,10 +43,3 @@ export default function Root({ children }: { children: React.ReactNode }) {
     </html>
   );
 }
-
-const viewportStyles = `
-  html, body {
-    max-width: ${MAX_WIDTH}px;
-    margin: 0 auto;
-  }
-`;
diff --git a/example/app/app/_layout.tsx b/example/app/app/_layout.tsx
index ba2f2a4..e8acc0b 100644
--- a/example/app/app/_layout.tsx
+++ b/example/app/app/_layout.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { I18nManager, View } from "react-native";
+import { I18nManager, Text, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { TamaguiProvider } from "tamagui";
+import { TamaguiProvider, XStack, YStack } from "tamagui";
 import { tamaguiConfig } from "../tamagui.config";
 
 import FontAwesome from "@expo/vector-icons/FontAwesome";
@@ -14,14 +14,9 @@ import { useWebContext } from "@/store/WebProvider";
 import { CaptureProvider } from "@/store/CaptureProvider";
 import { HeaderRight } from "@/components/HeaderRight";
 import { routes } from "./routes";
-import {
-  useGlobalSearchParams,
-  useLocalSearchParams,
-  useNavigation,
-  usePathname,
-} from "expo-router";
 import { useInDoc } from "@/hooks/useInDoc";
 import { IS_WEB } from "@/constants/platform";
+import { MAX_WIDTH } from "@/constants/sizes";
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -79,53 +74,67 @@ function RootLayoutNav() {
     }
   }, [inDoc]);
 
+  const backgroundColor = inDoc
+    ? tamaguiConfig.themes.dark.background.val
+    : tamaguiConfig.themes.light.background.val;
+
   return (
     <TamaguiProvider
       config={tamaguiConfig}
       defaultTheme={inDoc ? "dark" : "light"}
     >
-      <View style={{ flex: 1 }}>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <ThemeProvider value={DefaultTheme}>
-            <CaptureProvider>
-              <Stack
-                initialRouteName="/"
-                screenOptions={{
-                  headerShown: !inDoc && webHeaderShown,
-                  contentStyle: {
-                    flex: 1,
-                    backgroundColor: inDoc
-                      ? tamaguiConfig.themes.dark.background.val
-                      : tamaguiConfig.themes.light.background.val,
-                  },
-                  headerRight: ({ tintColor }) => (
-                    <HeaderRight
-                      tintColor={tintColor}
-                      isRTL={isRTL}
-                      setIsRTL={setIsRTL}
-                    />
-                  ),
-                }}
-              >
-                <Stack.Screen name="index" />
-                {routes
-                  .flatMap((item) =>
-                    item.demos.map((demo) => ({ ...demo, kind: item.kind })),
-                  )
-                  .map((item) => (
-                    <Stack.Screen
-                      key={item.name}
-                      name={`demos/${item.kind}/${item.name}/index`}
-                      options={{
-                        title: item.title,
-                      }}
-                    />
-                  ))}
-              </Stack>
-            </CaptureProvider>
-          </ThemeProvider>
-        </GestureHandlerRootView>
-      </View>
+      <Providers>
+        <XStack
+          flex={1}
+          justifyContent="center"
+          backgroundColor={backgroundColor}
+        >
+          <YStack minWidth={IS_WEB ? MAX_WIDTH : "100%"} height={"100%"}>
+            <Stack
+              initialRouteName="/"
+              screenOptions={{
+                headerShown: !inDoc && webHeaderShown,
+                contentStyle: {
+                  flex: 1,
+                  backgroundColor,
+                },
+                headerRight: ({ tintColor }) => (
+                  <HeaderRight
+                    tintColor={tintColor}
+                    isRTL={isRTL}
+                    setIsRTL={setIsRTL}
+                  />
+                ),
+              }}
+            >
+              <Stack.Screen name="index" />
+              {routes
+                .flatMap((item) =>
+                  item.demos.map((demo) => ({ ...demo, kind: item.kind })),
+                )
+                .map((item) => (
+                  <Stack.Screen
+                    key={item.name}
+                    name={`demos/${item.kind}/${item.name}/index`}
+                    options={{
+                      title: item.title,
+                    }}
+                  />
+                ))}
+            </Stack>
+          </YStack>
+        </XStack>
+      </Providers>
     </TamaguiProvider>
   );
 }
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider value={DefaultTheme}>
+        <CaptureProvider>{children}</CaptureProvider>
+      </ThemeProvider>
+    </GestureHandlerRootView>
+  );
+};
diff --git a/example/app/app/index.tsx b/example/app/app/index.tsx
index 29b7819..4bc102c 100644
--- a/example/app/app/index.tsx
+++ b/example/app/app/index.tsx
@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
 
-import { useNavigation, usePathname, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
 
 import { useColor } from "@/hooks/useColor";
 import { routes } from "./routes";
diff --git a/example/website/package.json b/example/website/package.json
index 3ec5123..cdcbc49 100644
--- a/example/website/package.json
+++ b/example/website/package.json
@@ -2,8 +2,6 @@
   "name": "reanimated-carousel-website",
   "version": "0.0.1",
   "description": "Nextra docs template",
-  "author": "Shu Ding <g@shud.in>",
-  "license": "MIT",
   "homepage": "https://github.com/dohooo/react-native-reanimated-carousel#readme",
   "repository": {
     "type": "git",