diff --git a/example/bun.lock b/example/bun.lock
index 4f61e168..5dc87e00 100644
--- a/example/bun.lock
+++ b/example/bun.lock
@@ -9,7 +9,6 @@
         "@react-navigation/material-top-tabs": "^7.8.0",
         "@react-navigation/native": "^7.5.0",
         "@react-navigation/native-stack": "^7.20.0",
-        "@react-navigation/stack": "^7.12.0",
         "react": "19.2.3",
         "react-native": "0.87.1",
         "react-native-animated-pagination-dots": "^0.1.73",
@@ -390,8 +389,6 @@
 
     "@react-navigation/routers": ["@react-navigation/routers@7.6.4", "", { "dependencies": { "nanoid": "^3.3.11" } }, "sha512-GI7eJm8/KsZUQaYcXvEExikKurRZRgEsSzyZ7faENfi65yqJBCXjDMwyN1pF6pNW1MoLH1ErDwDivFxY6BzD3w=="],
 
-    "@react-navigation/stack": ["@react-navigation/stack@7.12.0", "", { "dependencies": { "@react-navigation/elements": "^2.9.44", "color": "^4.2.3", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "@react-navigation/native": "^7.5.0", "react": ">= 18.2.0", "react-native": "*", "react-native-gesture-handler": ">= 2.0.0", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-aMKl1+fi/BDu7nlMABrVi8rbaZfThhacV9Iwh4R62vr+rXL6Dp3LuYg0lCrbC35nRUaHHs5WHeFLwshn6x1sEg=="],
-
     "@sideway/address": ["@sideway/address@4.1.5", "", { "dependencies": { "@hapi/hoek": "^9.0.0" } }, "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q=="],
 
     "@sideway/formula": ["@sideway/formula@3.0.1", "", {}, "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="],
diff --git a/example/package.json b/example/package.json
index 7141625f..d68e58cf 100644
--- a/example/package.json
+++ b/example/package.json
@@ -20,7 +20,6 @@
     "@react-navigation/material-top-tabs": "^7.8.0",
     "@react-navigation/native": "^7.5.0",
     "@react-navigation/native-stack": "^7.20.0",
-    "@react-navigation/stack": "^7.12.0",
     "react": "19.2.3",
     "react-native": "0.87.1",
     "react-native-animated-pagination-dots": "^0.1.73",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 99818f85..aba3d065 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -7,14 +7,19 @@ import {
   StyleSheet,
   Text,
   ScrollView,
-  TouchableOpacity,
-  Button,
-  Alert,
+  Platform,
+  Pressable,
+  View,
   I18nManager,
   DevSettings,
+  StatusBar,
 } from 'react-native';
-import { NavigationContainer, useNavigation } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import {
+  DefaultTheme,
+  NavigationContainer,
+  useNavigation,
+  type Theme,
+} from '@react-navigation/native';
 import { BasicPagerViewExample } from './BasicPagerViewExample';
 import { KeyboardExample } from './KeyboardExample';
 import { OnPageScrollExample } from './OnPageScrollExample';
@@ -32,6 +37,7 @@ import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
 import { MaterialTopBarExample } from './MaterialTopTabExample';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { PagerHookExample } from './PagerHookExample';
 import { NestedHorizontalScrollViewExample } from './NestedHorizontalScrollViewExample';
 import { Issue1096KeyboardShrinkRepro } from './gh-issues/Issue1096KeyboardShrinkRepro';
@@ -46,6 +52,7 @@ import {
   Issue1142PagerListScreen,
   Issue1142SearchBarInsetRepro,
 } from './gh-issues/Issue1142SearchBarInsetRepro';
+import { colors, radius } from './theme';
 
 function BasicPagerViewExampleScreen() {
   return <BasicPagerViewExample isHorizontal={true} />;
@@ -61,151 +68,136 @@ type Example = {
   testID?: string;
 };
 
-const examples: Example[] = [
-  {
-    component: BasicPagerViewExampleScreen,
-    name: 'Basic Example',
-    testID: 'example-basic-horizontal',
-  },
-  {
-    component: VerticalBasicPagerViewExampleScreen,
-    name: 'Vertical Basic Example',
-    testID: 'example-basic-vertical',
-  },
-
-  { component: OnPageScrollExample, name: 'OnPageScroll Example' },
-  { component: OnPageSelectedExample, name: 'OnPageSelected Example' },
+const chevron =
+  Platform.OS === 'ios' && I18nManager.getConstants().isRTL ? '‹' : '›';
 
+const sections: { title: string; data: Example[] }[] = [
   {
-    component: ScrollablePagerViewExample,
-    name: 'Scrollable PagerView Example',
-  },
-  {
-    component: NestedPagerView,
-    name: 'Nested PagerView Example',
-  },
-  {
-    component: NestedHorizontalScrollViewExample,
-    name: 'NestedHorizontalScrollViewExample',
-  },
+    title: 'Fundamental Examples',
+    data: [
+      {
+        component: BasicPagerViewExampleScreen,
+        name: 'Basic Example',
+        testID: 'example-basic-horizontal',
+      },
+      {
+        component: VerticalBasicPagerViewExampleScreen,
+        name: 'Vertical Basic Example',
+        testID: 'example-basic-vertical',
+      },
 
-  {
-    component: ScrollViewInsideExample,
-    name: 'ScrollView inside PagerView Example',
-  },
-  {
-    component: TabViewInsideScrollViewExample,
-    name: 'TabView inside ScrollView Example',
-  },
-];
+      { component: OnPageScrollExample, name: 'OnPageScroll Example' },
+      { component: OnPageSelectedExample, name: 'OnPageSelected Example' },
 
-const tabViewExamples: Example[] = [
-  { component: MaterialTopBarExample, name: 'MaterialTopBarExample' },
-  { component: TabBarIconExample, name: 'TabBarIconExample' },
-  { component: CustomTabBarExample, name: 'CustomTabBarExample' },
-  { component: CoverflowExample, name: 'CoverflowExample' },
-];
-
-const additionalExamples: Example[] = [
-  { component: PagerHookExample, name: 'Pager Hook Example' },
-  { component: KeyboardExample, name: 'Keyboard Example' },
-  { component: HeadphonesCarouselExample, name: 'Headphones Carousel Example' },
-  { component: PaginationDotsExample, name: 'Pagination Dots Example' },
-  {
-    component: ReanimatedOnPageScrollExample,
-    name: 'Reanimated onPageScroll example',
-  },
-];
+      {
+        component: ScrollablePagerViewExample,
+        name: 'Scrollable PagerView Example',
+      },
+      {
+        component: NestedPagerView,
+        name: 'Nested PagerView Example',
+      },
+      {
+        component: NestedHorizontalScrollViewExample,
+        name: 'NestedHorizontalScrollViewExample',
+      },
 
-const ghIssues: Example[] = [
-  {
-    component: Issue1083ModalSetPageExample,
-    name: 'Issue #1083 Modal SetPage Repro',
+      {
+        component: ScrollViewInsideExample,
+        name: 'ScrollView inside PagerView Example',
+      },
+    ],
   },
   {
-    component: Issue1096KeyboardShrinkRepro,
-    name: 'Issue #1096 Keyboard Shrink Repro',
+    title: 'TabView Examples',
+    data: [
+      { component: MaterialTopBarExample, name: 'MaterialTopBarExample' },
+      { component: TabBarIconExample, name: 'TabBarIconExample' },
+      { component: CustomTabBarExample, name: 'CustomTabBarExample' },
+      { component: CoverflowExample, name: 'CoverflowExample' },
+      {
+        component: TabViewInsideScrollViewExample,
+        name: 'TabView inside ScrollView Example',
+      },
+    ],
   },
   {
-    component: Issue1098NestedPagerRepro,
-    name: 'Issue #1098 Nested Pager Repro',
+    title: 'Additional Examples',
+    data: [
+      { component: PagerHookExample, name: 'Pager Hook Example' },
+      { component: KeyboardExample, name: 'Keyboard Example' },
+      {
+        component: HeadphonesCarouselExample,
+        name: 'Headphones Carousel Example',
+      },
+      { component: PaginationDotsExample, name: 'Pagination Dots Example' },
+      {
+        component: ReanimatedOnPageScrollExample,
+        name: 'Reanimated onPageScroll example',
+      },
+    ],
   },
   {
-    component: Issue1099SafeAreaRepro,
-    name: 'Issue #1099 Safe Area Repro',
-  },
-  {
-    component: Issue1142SearchBarInsetRepro,
-    name: 'Issue #1142 Search Bar Inset Repro',
+    title: 'Github Issues Examples',
+    data: [
+      {
+        component: Issue1083ModalSetPageExample,
+        name: 'Issue #1083 Modal SetPage Repro',
+      },
+      {
+        component: Issue1096KeyboardShrinkRepro,
+        name: 'Issue #1096 Keyboard Shrink Repro',
+      },
+      {
+        component: Issue1098NestedPagerRepro,
+        name: 'Issue #1098 Nested Pager Repro',
+      },
+      {
+        component: Issue1099SafeAreaRepro,
+        name: 'Issue #1099 Safe Area Repro',
+      },
+      {
+        component: Issue1142SearchBarInsetRepro,
+        name: 'Issue #1142 Search Bar Inset Repro',
+      },
+    ],
   },
 ];
 
-const allExamples = [
-  ...examples,
-  ...tabViewExamples,
-  ...additionalExamples,
-  ...ghIssues,
-];
+const allExamples = sections.flatMap((section) => section.data);
 
 function App() {
   const navigation = useNavigation();
   return (
-    <ScrollView>
-      <Text>Fundamental Examples</Text>
-      {examples.map((example) => (
-        <TouchableOpacity
-          key={example.name}
-          testID={example.testID ?? example.name}
-          style={styles.exampleTouchable}
-          onPress={() => {
-            //@ts-ignore
-            navigation.navigate(example.name);
-          }}
-        >
-          <Text style={styles.exampleText}>{example.name}</Text>
-        </TouchableOpacity>
-      ))}
-      <Text>TabView Examples</Text>
-      {tabViewExamples.map((example) => (
-        <TouchableOpacity
-          key={example.name}
-          testID={example.name}
-          style={styles.exampleTouchable}
-          onPress={() => {
-            //@ts-ignore
-            navigation.navigate(example.name);
-          }}
-        >
-          <Text style={styles.exampleText}>{example.name}</Text>
-        </TouchableOpacity>
-      ))}
-      <Text>Additional Examples</Text>
-      {additionalExamples.map((example) => (
-        <TouchableOpacity
-          key={example.name}
-          testID={example.name}
-          style={styles.exampleTouchable}
-          onPress={() => {
-            //@ts-ignore
-            navigation.navigate(example.name);
-          }}
-        >
-          <Text style={styles.exampleText}>{example.name}</Text>
-        </TouchableOpacity>
-      ))}
-      <Text>Github Issues Examples</Text>
-      {ghIssues.map((example) => (
-        <TouchableOpacity
-          key={example.name}
-          testID={example.name}
-          style={styles.exampleTouchable}
-          onPress={() => {
-            //@ts-ignore
-            navigation.navigate(example.name);
-          }}
-        >
-          <Text style={styles.exampleText}>{example.name}</Text>
-        </TouchableOpacity>
+    <ScrollView
+      style={styles.screen}
+      contentContainerStyle={styles.content}
+      contentInsetAdjustmentBehavior="automatic"
+    >
+      {sections.map((section) => (
+        <View key={section.title} style={styles.section}>
+          <Text style={styles.sectionTitle}>{section.title}</Text>
+          <View style={styles.card}>
+            {section.data.map((example, index) => (
+              <Pressable
+                key={example.name}
+                testID={example.testID ?? example.name}
+                style={({ pressed }) => [
+                  styles.row,
+                  index > 0 && styles.rowDivider,
+                  pressed && styles.rowPressed,
+                ]}
+                onPress={() => {
+                  //@ts-ignore
+                  navigation.navigate(example.name);
+                }}
+              >
+                <Text style={styles.rowText}>{example.name}</Text>
+                <Text style={styles.chevron}>{chevron}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
       ))}
     </ScrollView>
   );
@@ -220,95 +212,154 @@ function App() {
 function LayoutDirectionToggle() {
   const [isRTL, setIsRTL] = React.useState(I18nManager.getConstants().isRTL);
   return (
-    <Button
-      title={isRTL ? 'RTL' : 'LTR'}
-      color="orange"
+    <Pressable
       testID={`layout-direction-${isRTL ? 'rtl' : 'ltr'}`}
+      hitSlop={8}
+      style={({ pressed }) => [styles.toggle, pressed && styles.togglePressed]}
       onPress={() => {
         const next = !I18nManager.getConstants().isRTL;
         I18nManager.forceRTL(next);
         setIsRTL(next);
         DevSettings.reload();
       }}
-    />
+    >
+      <Text style={styles.toggleText}>{isRTL ? 'RTL' : 'LTR'}</Text>
+    </Pressable>
   );
 }
 
-const Stack = createStackNavigator();
+const renderLayoutDirectionToggle = () => <LayoutDirectionToggle />;
 
-const NativeStack = createNativeStackNavigator();
+const navigationTheme: Theme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: colors.primary,
+    background: colors.background,
+    card: colors.background,
+    text: colors.foreground,
+    border: colors.border,
+  },
+};
+
+const NavigationStack = createNativeStackNavigator();
 
 export function Navigation() {
-  const [mode, setMode] = React.useState<'native' | 'js'>('native');
-  const NavigationStack = mode === 'js' ? Stack : NativeStack;
   return (
-    <SafeAreaProvider>
-      <NavigationContainer>
-        <NavigationStack.Navigator initialRouteName="PagerView Example">
-          <NavigationStack.Screen
-            name="PagerView Example"
-            component={App}
-            options={{
-              headerRight: () => (
-                <Button
-                  onPress={() =>
-                    Alert.alert(
-                      'Alert',
-                      `Do you want to change to the ${
-                        mode === 'js' ? 'native stack' : 'js stack'
-                      } ?`,
-                      [
-                        { text: 'No', onPress: () => {} },
-                        {
-                          text: 'Yes',
-                          onPress: () => {
-                            setMode(mode === 'js' ? 'native' : 'js');
-                          },
-                        },
-                      ]
-                    )
-                  }
-                  title={mode === 'js' ? 'JS' : 'NATIVE'}
-                  color="orange"
-                />
-              ),
-              headerLeft: () => <LayoutDirectionToggle />,
+    <GestureHandlerRootView style={styles.root}>
+      <SafeAreaProvider>
+        <StatusBar barStyle="dark-content" />
+        <NavigationContainer theme={navigationTheme}>
+          <NavigationStack.Navigator
+            initialRouteName="PagerView Example"
+            screenOptions={{
+              headerShadowVisible: false,
+              headerTintColor: colors.foreground,
+              headerTitleStyle: { fontWeight: '600' },
+              headerBackButtonDisplayMode: 'minimal',
             }}
-          />
-          {allExamples.map((example, index) => (
+          >
             <NavigationStack.Screen
-              key={index}
-              name={example.name}
-              component={example.component}
+              name="PagerView Example"
+              component={App}
+              options={{
+                title: 'PagerView',
+                headerLeft: renderLayoutDirectionToggle,
+              }}
             />
-          ))}
-          <NavigationStack.Screen
-            name="ModalSetPageModal"
-            component={ModalSetPageModalScreen}
-            options={{
-              presentation: 'modal',
-              animation: 'slide_from_bottom',
-            }}
-          />
-          <NavigationStack.Screen
-            name="Issue #1142 Plain List"
-            component={Issue1142PlainListScreen}
-          />
-          <NavigationStack.Screen
-            name="Issue #1142 Pager List"
-            component={Issue1142PagerListScreen}
-          />
-        </NavigationStack.Navigator>
-      </NavigationContainer>
-    </SafeAreaProvider>
+            {allExamples.map((example, index) => (
+              <NavigationStack.Screen
+                key={index}
+                name={example.name}
+                component={example.component}
+              />
+            ))}
+            <NavigationStack.Screen
+              name="ModalSetPageModal"
+              component={ModalSetPageModalScreen}
+              options={{
+                presentation: 'modal',
+                animation: 'slide_from_bottom',
+              }}
+            />
+            <NavigationStack.Screen
+              name="Issue #1142 Plain List"
+              component={Issue1142PlainListScreen}
+            />
+            <NavigationStack.Screen
+              name="Issue #1142 Pager List"
+              component={Issue1142PagerListScreen}
+            />
+          </NavigationStack.Navigator>
+        </NavigationContainer>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   );
 }
 
 const styles = StyleSheet.create({
-  exampleTouchable: {
+  root: {
+    flex: 1,
+  },
+  screen: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  content: {
     padding: 16,
+    paddingBottom: 48,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    marginBottom: 8,
+    textAlign: 'left',
+    paddingHorizontal: 4,
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.foreground,
+  },
+  card: {
+    borderRadius: radius.lg,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.background,
+    overflow: 'hidden',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  rowDivider: {
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+  rowPressed: {
+    backgroundColor: colors.muted,
+  },
+  rowText: {
+    flex: 1,
+    textAlign: 'left',
+    fontSize: 15,
+    color: colors.foreground,
+  },
+  chevron: {
+    fontSize: 20,
+    lineHeight: 20,
+    color: colors.mutedForeground,
+  },
+  toggle: {
+    paddingHorizontal: 6,
+  },
+  togglePressed: {
+    opacity: 0.6,
   },
-  exampleText: {
-    fontSize: 16,
+  toggleText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.foreground,
   },
 });
diff --git a/example/src/component/Button.tsx b/example/src/component/Button.tsx
index 050ad577..507e9c6d 100644
--- a/example/src/component/Button.tsx
+++ b/example/src/component/Button.tsx
@@ -1,60 +1,97 @@
 import React from 'react';
 import {
+  Pressable,
   StyleProp,
   StyleSheet,
   Text,
-  TouchableWithoutFeedback,
-  View,
   ViewProps,
   ViewStyle,
 } from 'react-native';
+import { colors, radius } from '../theme';
 
 interface Props extends ViewProps {
   disabled?: boolean;
   onPress: () => void;
   text: string;
+  variant?: 'default' | 'outline';
   style?: StyleProp<ViewStyle>;
 }
 
-export class Button extends React.Component<Props> {
-  _handlePress = () => {
-    if (!this.props.disabled && this.props.onPress) {
-      this.props.onPress();
-    }
-  };
-
-  render() {
-    const { accessibilityLabel, disabled, style, testID, text } = this.props;
-
-    return (
-      <TouchableWithoutFeedback onPress={this._handlePress}>
-        <View
-          accessibilityLabel={accessibilityLabel}
-          testID={testID}
-          style={[styles.button, !disabled ? {} : styles.buttonDisabled, style]}
-        >
-          <Text style={styles.buttonText}>{text}</Text>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
+export function Button({
+  accessibilityLabel,
+  disabled,
+  onPress,
+  style,
+  testID,
+  text,
+  variant = 'outline',
+}: Props) {
+  const isOutline = variant === 'outline';
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      disabled={disabled}
+      testID={testID}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.button,
+        isOutline ? styles.outline : styles.primary,
+        pressed && (isOutline ? styles.outlinePressed : styles.primaryPressed),
+        disabled && styles.buttonDisabled,
+        style,
+      ]}
+    >
+      <Text
+        numberOfLines={1}
+        style={[
+          styles.buttonText,
+          isOutline ? styles.outlineText : styles.primaryText,
+        ]}
+      >
+        {text}
+      </Text>
+    </Pressable>
+  );
 }
 
 const styles = StyleSheet.create({
   button: {
     flex: 1,
     width: 0,
-    margin: 5,
-    borderColor: 'gray',
+    height: 36,
+    margin: 4,
+    paddingHorizontal: 12,
+    borderRadius: radius.md,
     borderWidth: 1,
-    backgroundColor: 'gray',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primary: {
+    backgroundColor: colors.primary,
+    borderColor: colors.primary,
+  },
+  primaryPressed: {
+    opacity: 0.9,
+  },
+  outline: {
+    backgroundColor: colors.background,
+    borderColor: colors.border,
+  },
+  outlinePressed: {
+    backgroundColor: colors.muted,
   },
   buttonDisabled: {
-    backgroundColor: 'black',
     opacity: 0.5,
   },
   buttonText: {
-    color: 'white',
-    margin: 10,
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  primaryText: {
+    color: colors.primaryForeground,
+  },
+  outlineText: {
+    color: colors.foreground,
   },
 });
diff --git a/example/src/component/NavigationPanel/ControlPanel.tsx b/example/src/component/NavigationPanel/ControlPanel.tsx
index dc616840..0e2d046e 100644
--- a/example/src/component/NavigationPanel/ControlPanel.tsx
+++ b/example/src/component/NavigationPanel/ControlPanel.tsx
@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Button } from '../Button';
-import { ProgressBar } from '../ProgressBar';
 import type { NavigationPanelProps } from './types';
+import { colors, radius } from '../../theme';
+
+const padNumber = (value: number) => String(value).padStart(2, '0');
 
 export function ControlsPanel({
   activePage,
@@ -33,8 +35,13 @@ export function ControlsPanel({
     () => setPage(pages.length - 1),
     [pages.length, setPage]
   );
+  const fraction =
+    pages.length > 1
+      ? (progress.position + progress.offset) / (pages.length - 1)
+      : 1;
+  const progressPercent = Math.max(0, Math.min(1, fraction)) * 100;
   return (
-    <>
+    <View style={styles.container}>
       <View style={styles.buttons}>
         <Button
           testID="scroll-enabled-button"
@@ -42,7 +49,6 @@ export function ControlsPanel({
           onPress={toggleScroll}
         />
         <Button
-          style={styles.buttonAdjustment}
           text={overdrag ? 'Overdrag Enabled' : 'Overdrag Disabled'}
           onPress={() => toggleOverdrag()}
         />
@@ -68,12 +74,11 @@ export function ControlsPanel({
           onPress={toggleAnimation}
         />
         <View style={styles.scrollState}>
-          <Text style={styles.scrollStateText}>
-            ScrollState[ {scrollState} ]
-          </Text>
+          <Text style={styles.scrollStateLabel}>state</Text>
+          <Text style={styles.scrollStateText}>{scrollState}</Text>
         </View>
       </View>
-      <View style={styles.buttons}>
+      <View style={[styles.buttons, styles.navigation]}>
         <Button
           testID="start-page-button"
           text="Start"
@@ -89,84 +94,98 @@ export function ControlsPanel({
         <Button
           testID="next-page-button"
           text="Next"
+          variant="default"
           disabled={activePage === pages.length - 1}
           onPress={nextPage}
         />
         <Button
           testID="last-page-button"
           text="Last"
+          variant="default"
           disabled={activePage === pages.length - 1}
           onPress={lastPage}
         />
       </View>
       <View style={styles.progress}>
-        <Text style={styles.buttonText}>
-          Page {activePage + 1} / {pages.length}{' '}
+        <Text style={styles.progressText}>
+          {padNumber(activePage + 1)}
+          <Text style={styles.progressTotal}>
+            {' / '}
+            {padNumber(pages.length)}
+          </Text>
         </Text>
-        <ProgressBar numberOfPages={pages.length} progress={progress} />
+        <View style={styles.progressTrack}>
+          <View
+            style={[styles.progressFill, { width: `${progressPercent}%` }]}
+          />
+        </View>
       </View>
-    </>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  toggleVisibilityButtonContainer: {
-    position: 'absolute',
-    left: 8,
-    bottom: '100%',
-    flexDirection: 'row',
+  container: {
+    paddingHorizontal: 12,
+    paddingBottom: 8,
   },
-  toggleVisibilityButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#000',
+  buttons: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-    borderTopLeftRadius: 5,
-    borderTopRightRadius: 5,
-    borderWidth: 1,
-    borderColor: '#000',
   },
-  toggleVisibilityButtonActive: {
-    backgroundColor: '#fff',
+  navigation: {
+    marginTop: 4,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
   },
-  toggleVisibilityText: {
-    color: '#fff',
-    fontSize: 20,
-  },
-  toggleVisibilityTextActive: {
-    color: '#000',
-  },
-  buttons: {
+  scrollState: {
+    flex: 1,
+    height: 36,
+    margin: 4,
+    paddingHorizontal: 12,
     flexDirection: 'row',
-    backgroundColor: 'black',
     alignItems: 'center',
     justifyContent: 'space-between',
+    borderRadius: radius.md,
+    backgroundColor: colors.muted,
   },
-  hiddenContainer: {
-    height: 0,
-    overflow: 'hidden',
+  scrollStateLabel: {
+    fontSize: 11,
+    color: colors.mutedForeground,
   },
-  buttonAdjustment: {
-    flex: 1,
+  scrollStateText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.foreground,
   },
   progress: {
     flexDirection: 'row',
-    height: 40,
-    backgroundColor: 'black',
-    justifyContent: 'space-between',
     alignItems: 'center',
+    gap: 12,
+    height: 36,
+    paddingHorizontal: 4,
   },
-  buttonText: {
-    color: 'white',
-    paddingHorizontal: 20,
-  },
-  scrollState: {
+  progressTrack: {
     flex: 1,
-    justifyContent: 'flex-end',
+    height: 8,
+    borderRadius: radius.full,
+    backgroundColor: colors.muted,
+    overflow: 'hidden',
   },
-  scrollStateText: {
-    color: '#99d1b7',
-    textAlign: 'center',
+  progressFill: {
+    height: '100%',
+    borderRadius: radius.full,
+    backgroundColor: colors.primary,
+  },
+  progressText: {
+    fontVariant: ['tabular-nums'],
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.foreground,
+  },
+  progressTotal: {
+    fontWeight: '400',
+    color: colors.mutedForeground,
   },
 });
diff --git a/example/src/component/NavigationPanel/LogsPanel.tsx b/example/src/component/NavigationPanel/LogsPanel.tsx
index ae89692f..0fe0ab79 100644
--- a/example/src/component/NavigationPanel/LogsPanel.tsx
+++ b/example/src/component/NavigationPanel/LogsPanel.tsx
@@ -2,23 +2,39 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import type { LogsPanelProps } from './types';
+import type { EventLog } from '../../hook/useNavigationPanel';
+import { colors, radius } from '../../theme';
+
+const eventColors: Record<EventLog['event'], string> = {
+  scroll: '#e0f2fe',
+  select: '#dcfce7',
+  statusChanged: '#fef3c7',
+};
 
 export function LogsPanel({ logs }: LogsPanelProps) {
-  console.log(logs);
   return (
     <FlatList
       style={styles.container}
+      contentContainerStyle={styles.content}
       data={logs}
+      ListEmptyComponent={
+        <Text style={styles.empty}>Swipe the pager to see events.</Text>
+      }
       renderItem={({ item }) => (
-        //@ts-ignore
-        <View style={[styles.item, styles[item.event]]}>
-          <Text style={styles.text}>
-            {item.timestamp.toLocaleTimeString()}
-            <Text style={styles.eventName}>
-              {' | '}
-              {item.event.toLocaleUpperCase()}
+        <View style={styles.item}>
+          <View style={styles.meta}>
+            <View
+              style={[
+                styles.badge,
+                { backgroundColor: eventColors[item.event] },
+              ]}
+            >
+              <Text style={styles.badgeText}>{item.event}</Text>
+            </View>
+            <Text style={styles.time}>
+              {item.timestamp.toLocaleTimeString()}
             </Text>
-          </Text>
+          </View>
           <Text style={styles.text}>{item.text}</Text>
         </View>
       )}
@@ -28,26 +44,45 @@ export function LogsPanel({ logs }: LogsPanelProps) {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: 'black',
     height: 250,
   },
+  content: {
+    paddingHorizontal: 12,
+    paddingBottom: 12,
+  },
   item: {
+    paddingVertical: 8,
     borderBottomWidth: 1,
-    borderColor: '#ccc',
+    borderBottomColor: colors.border,
+  },
+  meta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 4,
   },
-  scroll: {
-    backgroundColor: 'cyan',
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: radius.full,
   },
-  select: {
-    backgroundColor: 'greenyellow',
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: colors.foreground,
   },
-  statusChanged: {
-    backgroundColor: 'tomato',
+  time: {
+    fontSize: 11,
+    color: colors.mutedForeground,
   },
   text: {
-    color: '#000',
+    fontSize: 12,
+    color: colors.foreground,
   },
-  eventName: {
-    color: '#595959',
+  empty: {
+    paddingVertical: 24,
+    textAlign: 'center',
+    fontSize: 13,
+    color: colors.mutedForeground,
   },
 });
diff --git a/example/src/component/NavigationPanel/NavigationPanel.tsx b/example/src/component/NavigationPanel/NavigationPanel.tsx
index 50c2b2c5..981aa81d 100644
--- a/example/src/component/NavigationPanel/NavigationPanel.tsx
+++ b/example/src/component/NavigationPanel/NavigationPanel.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, Text, View, Pressable } from 'react-native';
 import { ControlsPanel } from './ControlPanel';
 import { LogsPanel } from './LogsPanel';
 import type { NavigationPanelProps } from './types';
+import { colors, radius } from '../../theme';
 
 enum VisibleTab {
   None,
@@ -10,60 +11,35 @@ enum VisibleTab {
   Controls,
 }
 
+const tabs = [
+  { tab: VisibleTab.Controls, label: 'Control' },
+  { tab: VisibleTab.Logs, label: 'Logs' },
+];
+
 export function NavigationPanel(props: NavigationPanelProps) {
   const [visible, setVisible] = useState(VisibleTab.Controls);
 
   return (
-    <View>
-      <View style={styles.toggleVisibilityButtonContainer}>
-        <TouchableOpacity
-          style={[
-            styles.toggleVisibilityButton,
-            visible === VisibleTab.Controls &&
-              styles.toggleVisibilityButtonActive,
-          ]}
-          activeOpacity={0.8}
-          onPress={() =>
-            setVisible((prevVisible) =>
-              prevVisible === VisibleTab.Controls
-                ? VisibleTab.None
-                : VisibleTab.Controls
-            )
-          }
-        >
-          <Text
-            style={[
-              styles.toggleVisibilityText,
-              visible === VisibleTab.Controls &&
-                styles.toggleVisibilityTextActive,
-            ]}
-          >
-            Control
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[
-            styles.toggleVisibilityButton,
-            visible === VisibleTab.Logs && styles.toggleVisibilityButtonActive,
-          ]}
-          activeOpacity={0.8}
-          onPress={() => {
-            setVisible((prevVisible) =>
-              prevVisible === VisibleTab.Logs
-                ? VisibleTab.None
-                : VisibleTab.Logs
-            );
-          }}
-        >
-          <Text
-            style={[
-              styles.toggleVisibilityText,
-              visible === VisibleTab.Logs && styles.toggleVisibilityTextActive,
-            ]}
-          >
-            Logs
-          </Text>
-        </TouchableOpacity>
+    <View style={styles.container}>
+      <View style={styles.tabList}>
+        {tabs.map(({ tab, label }) => {
+          const isActive = visible === tab;
+          return (
+            <Pressable
+              key={label}
+              style={[styles.tabTrigger, isActive && styles.tabTriggerActive]}
+              onPress={() =>
+                setVisible((prevVisible) =>
+                  prevVisible === tab ? VisibleTab.None : tab
+                )
+              }
+            >
+              <Text style={[styles.tabText, isActive && styles.tabTextActive]}>
+                {label}
+              </Text>
+            </Pressable>
+          );
+        })}
       </View>
       {visible === VisibleTab.Controls ? <ControlsPanel {...props} /> : null}
       {visible === VisibleTab.Logs ? (
@@ -74,29 +50,38 @@ export function NavigationPanel(props: NavigationPanelProps) {
 }
 
 const styles = StyleSheet.create({
-  toggleVisibilityButtonContainer: {
-    position: 'absolute',
-    left: 8,
-    bottom: '100%',
+  container: {
+    backgroundColor: colors.background,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+  tabList: {
     flexDirection: 'row',
+    alignSelf: 'flex-start',
+    margin: 12,
+    padding: 3,
+    borderRadius: radius.lg,
+    backgroundColor: colors.muted,
   },
-  toggleVisibilityButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#000',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderTopLeftRadius: 5,
-    borderTopRightRadius: 5,
+  tabTrigger: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: radius.md - 1,
   },
-  toggleVisibilityButtonActive: {
-    backgroundColor: '#fff',
+  tabTriggerActive: {
+    backgroundColor: colors.background,
+    shadowColor: '#000',
+    shadowOpacity: 0.08,
+    shadowRadius: 2,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 1,
   },
-  toggleVisibilityText: {
-    color: '#fff',
-    fontSize: 20,
+  tabText: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: colors.mutedForeground,
   },
-  toggleVisibilityTextActive: {
-    color: '#000',
+  tabTextActive: {
+    color: colors.foreground,
   },
 });
diff --git a/example/src/theme.ts b/example/src/theme.ts
new file mode 100644
index 00000000..ef196128
--- /dev/null
+++ b/example/src/theme.ts
@@ -0,0 +1,15 @@
+export const colors = {
+  background: '#ffffff',
+  foreground: '#09090b',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  border: '#e4e4e7',
+  primary: '#0a0a0a',
+  primaryForeground: '#fafafa',
+};
+
+export const radius = {
+  md: 8,
+  lg: 10,
+  full: 999,
+};
diff --git a/img/android-viewpager-vertical.gif b/img/android-viewpager-vertical.gif
index ba638646..2996271f 100644
Binary files a/img/android-viewpager-vertical.gif and b/img/android-viewpager-vertical.gif differ
diff --git a/img/android-viewpager.gif b/img/android-viewpager.gif
index 2fb2a9d8..0f65bc8a 100644
Binary files a/img/android-viewpager.gif and b/img/android-viewpager.gif differ
diff --git a/img/ios-viewpager-scroll.gif b/img/ios-viewpager-scroll.gif
index a234cd88..c8f0326f 100644
Binary files a/img/ios-viewpager-scroll.gif and b/img/ios-viewpager-scroll.gif differ
diff --git a/img/ios-viewpager-vertical.gif b/img/ios-viewpager-vertical.gif
index ce99e4ea..cf4d8641 100644
Binary files a/img/ios-viewpager-vertical.gif and b/img/ios-viewpager-vertical.gif differ
diff --git a/img/vp-carousel.gif b/img/vp-carousel.gif
index 8bc6335f..7ee324ba 100644
Binary files a/img/vp-carousel.gif and b/img/vp-carousel.gif differ