diff --git a/app/(auth)/(tabs)/(custom-links)/_layout.tsx b/app/(auth)/(tabs)/(custom-links)/_layout.tsx
index f3b436a7..3b8a58e2 100644
--- a/app/(auth)/(tabs)/(custom-links)/_layout.tsx
+++ b/app/(auth)/(tabs)/(custom-links)/_layout.tsx
@@ -9,7 +9,7 @@ export default function CustomMenuLayout() {
       <Stack.Screen
         name='index'
         options={{
-          headerShown: true,
+          headerShown: Platform.OS !== "ios",
           headerLargeTitle: true,
           headerTitle: t("tabs.custom_links"),
           headerBlurEffect: "none",
diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
index 798fa2cc..cac95ee3 100644
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
@@ -393,7 +393,6 @@ const page: React.FC = () => {
       data={flatData}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
-      estimatedItemSize={255}
       numColumns={
         orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
       }
diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
index 60b96e86..e2816a92 100644
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
@@ -22,10 +22,7 @@ import DetailFacts from "@/components/jellyseerr/DetailFacts";
 import RequestModal from "@/components/jellyseerr/RequestModal";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
-import {
-  type OptionGroup,
-  PlatformOptionsMenu,
-} from "@/components/PlatformOptionsMenu";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { JellyserrRatings } from "@/components/Ratings";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
@@ -66,7 +63,6 @@ const Page: React.FC = () => {
   const [issueType, setIssueType] = useState<IssueType>();
   const [issueMessage, setIssueMessage] = useState<string>();
   const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
-  const [issueTypeMenuOpen, setIssueTypeMenuOpen] = useState(false);
   const advancedReqModalRef = useRef<BottomSheetModal>(null);
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -158,30 +154,24 @@ const Page: React.FC = () => {
     [details],
   );
 
-  const issueTypeOptionGroups: OptionGroup[] = useMemo(
+  const issueTypeOptionGroups = useMemo(
     () => [
       {
-        id: "issue-types",
         title: t("jellyseerr.types"),
         options: Object.entries(IssueTypeName)
           .reverse()
           .map(([key, value]) => ({
-            id: key,
             type: "radio" as const,
-            groupId: "issue-types",
             label: value,
+            value: key,
             selected: key === String(issueType),
+            onPress: () => setIssueType(key as unknown as IssueType),
           })),
       },
     ],
     [issueType, t],
   );
 
-  const handleIssueTypeSelect = (optionId: string) => {
-    setIssueType(optionId as unknown as IssueType);
-    setIssueTypeMenuOpen(false);
-  };
-
   useEffect(() => {
     if (details) {
       navigation.setOptions({
@@ -390,37 +380,22 @@ const Page: React.FC = () => {
                 </Text>
               </View>
               <View className='flex flex-col space-y-2 items-start'>
-                <View className='flex flex-col'>
-                  <PlatformOptionsMenu
+                <View className='flex flex-col w-full'>
+                  <Text className='opacity-50 mb-1 text-xs'>
+                    {t("jellyseerr.issue_type")}
+                  </Text>
+                  <PlatformDropdown
                     groups={issueTypeOptionGroups}
                     trigger={
-                      <View className='flex flex-col'>
-                        <Text className='opacity-50 mb-1 text-xs'>
-                          {t("jellyseerr.issue_type")}
+                      <View className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                        <Text numberOfLines={1}>
+                          {issueType
+                            ? IssueTypeName[issueType]
+                            : t("jellyseerr.select_an_issue")}
                         </Text>
-                        <TouchableOpacity
-                          className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
-                          onPress={() => setIssueTypeMenuOpen(true)}
-                        >
-                          <Text numberOfLines={1}>
-                            {issueType
-                              ? IssueTypeName[issueType]
-                              : t("jellyseerr.select_an_issue")}
-                          </Text>
-                        </TouchableOpacity>
                       </View>
                     }
                     title={t("jellyseerr.types")}
-                    open={issueTypeMenuOpen}
-                    onOpenChange={setIssueTypeMenuOpen}
-                    onOptionSelect={handleIssueTypeSelect}
-                    expoUIConfig={{
-                      hostStyle: { flex: 1 },
-                    }}
-                    bottomSheetConfig={{
-                      enableDynamicSizing: true,
-                      enablePanDownToClose: true,
-                    }}
                   />
                 </View>
 
diff --git a/app/(auth)/(tabs)/(libraries)/_layout.tsx b/app/(auth)/(tabs)/(libraries)/_layout.tsx
index 89a3e847..60dd9e1e 100644
--- a/app/(auth)/(tabs)/(libraries)/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/_layout.tsx
@@ -1,85 +1,159 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity } from "react-native";
-import { LibraryOptionsSheet } from "@/components/settings/LibraryOptionsSheet";
+import { Platform } from "react-native";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function IndexLayout() {
   const { settings, updateSettings, pluginSettings } = useSettings();
-  const [optionsSheetOpen, setOptionsSheetOpen] = useState(false);
 
   const { t } = useTranslation();
 
   if (!settings?.libraryOptions) return null;
 
   return (
-    <>
-      <Stack>
-        <Stack.Screen
-          name='index'
-          options={{
-            headerShown: !Platform.isTV,
-            headerTitle: t("tabs.library"),
-            headerBlurEffect: "none",
-            headerTransparent: true,
-            headerShadowVisible: false,
-            headerRight: () =>
-              !pluginSettings?.libraryOptions?.locked &&
-              !Platform.isTV && (
-                <TouchableOpacity
-                  onPress={() => setOptionsSheetOpen(true)}
-                  className='flex flex-row items-center justify-center w-9 h-9'
-                >
-                  <Ionicons
-                    name='ellipsis-horizontal-outline'
-                    size={24}
-                    color='white'
-                  />
-                </TouchableOpacity>
-              ),
-          }}
-        />
-        <Stack.Screen
-          name='[libraryId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: true,
-            headerShadowVisible: false,
-          }}
-        />
-        {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
-          <Stack.Screen key={name} name={name} options={options} />
-        ))}
-        <Stack.Screen
-          name='collections/[collectionId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: true,
-            headerShadowVisible: false,
-          }}
-        />
-      </Stack>
-      <LibraryOptionsSheet
-        open={optionsSheetOpen}
-        setOpen={setOptionsSheetOpen}
-        settings={settings.libraryOptions}
-        updateSettings={(options) =>
-          updateSettings({
-            libraryOptions: {
-              ...settings.libraryOptions,
-              ...options,
-            },
-          })
-        }
-        disabled={pluginSettings?.libraryOptions?.locked}
+    <Stack>
+      <Stack.Screen
+        name='index'
+        options={{
+          headerShown: !Platform.isTV,
+          headerTitle: t("tabs.library"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerRight: () => (
+            <PlatformDropdown
+              trigger={
+                <Ionicons
+                  name='ellipsis-horizontal-outline'
+                  size={24}
+                  color='white'
+                />
+              }
+              title={t("library.options.display")}
+              groups={[
+                {
+                  title: t("library.options.display"),
+                  options: [
+                    {
+                      type: "radio",
+                      label: t("library.options.row"),
+                      value: "row",
+                      selected: settings.libraryOptions.display === "row",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            display: "row",
+                          },
+                        }),
+                    },
+                    {
+                      type: "radio",
+                      label: t("library.options.list"),
+                      value: "list",
+                      selected: settings.libraryOptions.display === "list",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            display: "list",
+                          },
+                        }),
+                    },
+                  ],
+                },
+                {
+                  title: t("library.options.image_style"),
+                  options: [
+                    {
+                      type: "radio",
+                      label: t("library.options.poster"),
+                      value: "poster",
+                      selected: settings.libraryOptions.imageStyle === "poster",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            imageStyle: "poster",
+                          },
+                        }),
+                    },
+                    {
+                      type: "radio",
+                      label: t("library.options.cover"),
+                      value: "cover",
+                      selected: settings.libraryOptions.imageStyle === "cover",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            imageStyle: "cover",
+                          },
+                        }),
+                    },
+                  ],
+                },
+                {
+                  title: "Options",
+                  options: [
+                    {
+                      type: "toggle",
+                      label: t("library.options.show_titles"),
+                      value: settings.libraryOptions.showTitles,
+                      onToggle: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            showTitles: !settings.libraryOptions.showTitles,
+                          },
+                        }),
+                      disabled: settings.libraryOptions.imageStyle === "poster",
+                    },
+                    {
+                      type: "toggle",
+                      label: t("library.options.show_stats"),
+                      value: settings.libraryOptions.showStats,
+                      onToggle: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            showStats: !settings.libraryOptions.showStats,
+                          },
+                        }),
+                    },
+                  ],
+                },
+              ]}
+            />
+          ),
+        }}
       />
-    </>
+      <Stack.Screen
+        name='[libraryId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
+      <Stack.Screen
+        name='collections/[collectionId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+    </Stack>
   );
 }
diff --git a/app/(auth)/(tabs)/(libraries)/index.tsx b/app/(auth)/(tabs)/(libraries)/index.tsx
index 7e8bc387..67be860a 100644
--- a/app/(auth)/(tabs)/(libraries)/index.tsx
+++ b/app/(auth)/(tabs)/(libraries)/index.tsx
@@ -87,8 +87,8 @@ export default function index() {
         paddingTop: 17,
         paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
         paddingBottom: 150,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
+        paddingLeft: insets.left + 17,
+        paddingRight: insets.right + 17,
       }}
       data={libraries}
       renderItem={({ item }) => <LibraryItemCard library={item} />}
diff --git a/bun.lock b/bun.lock
index 9191042d..55d49cfe 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,7 +7,7 @@
         "@bottom-tabs/react-navigation": "^0.11.2",
         "@expo/metro-runtime": "~6.1.1",
         "@expo/react-native-action-sheet": "^4.1.1",
-        "@expo/ui": "~0.2.0-beta.4",
+        "@expo/ui": "^0.2.0-beta.4",
         "@expo/vector-icons": "^15.0.2",
         "@gorhom/bottom-sheet": "^5.1.0",
         "@jellyfin/sdk": "^0.11.0",
diff --git a/components/AudioTrackSelector.tsx b/components/AudioTrackSelector.tsx
index e2c0ec7f..02e06d3d 100644
--- a/components/AudioTrackSelector.tsx
+++ b/components/AudioTrackSelector.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
-import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -34,32 +34,25 @@ export const AudioTrackSelector: React.FC<Props> = ({
   const optionGroups: OptionGroup[] = useMemo(
     () => [
       {
-        id: "audio-streams",
         title: "Audio streams",
         options:
           audioStreams?.map((audio, idx) => ({
-            id: `${audio.Index || idx}`,
             type: "radio" as const,
-            groupId: "audio-streams",
             label: audio.DisplayTitle || `Audio Stream ${idx + 1}`,
+            value: audio.Index ?? idx,
             selected: audio.Index === selected,
+            onPress: () => {
+              if (audio.Index !== null && audio.Index !== undefined) {
+                onChange(audio.Index);
+              }
+            },
           })) || [],
       },
     ],
-    [audioStreams, selected],
+    [audioStreams, selected, onChange],
   );
 
-  const handleOptionSelect = (optionId: string) => {
-    const selectedStream = audioStreams?.find(
-      (audio, idx) => `${audio.Index || idx}` === optionId,
-    );
-    if (
-      selectedStream &&
-      selectedStream.Index !== null &&
-      selectedStream.Index !== undefined
-    ) {
-      onChange(selectedStream.Index);
-    }
+  const handleOptionSelect = () => {
     setOpen(false);
   };
 
@@ -84,7 +77,7 @@ export const AudioTrackSelector: React.FC<Props> = ({
         minWidth: 50,
       }}
     >
-      <PlatformOptionsMenu
+      <PlatformDropdown
         groups={optionGroups}
         trigger={trigger}
         title={t("item_card.audio")}
diff --git a/components/BitrateSelector.tsx b/components/BitrateSelector.tsx
index 32be1098..fa8b01d6 100644
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
-import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 export type Bitrate = {
   key: string;
@@ -125,7 +125,7 @@ export const BitrateSelector: React.FC<Props> = ({
         maxWidth: 200,
       }}
     >
-      <PlatformOptionsMenu
+      <PlatformDropdown
         groups={optionGroups}
         trigger={trigger}
         title={t("item_card.quality")}
diff --git a/components/MediaSourceSelector.tsx b/components/MediaSourceSelector.tsx
index 34860a79..92273a3c 100644
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -6,7 +6,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
-import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 interface Props extends React.ComponentProps<typeof View> {
   item: BaseItemDto;
@@ -93,7 +93,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
         minWidth: 50,
       }}
     >
-      <PlatformOptionsMenu
+      <PlatformDropdown
         groups={optionGroups}
         trigger={trigger}
         title={t("item_card.video")}
diff --git a/components/PlatformDropdown.tsx b/components/PlatformDropdown.tsx
new file mode 100644
index 00000000..585eea25
--- /dev/null
+++ b/components/PlatformDropdown.tsx
@@ -0,0 +1,299 @@
+import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect } from "react";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+
+// Option types
+export type RadioOption<T = any> = {
+  type: "radio";
+  label: string;
+  value: T;
+  selected: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+};
+
+export type ToggleOption = {
+  type: "toggle";
+  label: string;
+  value: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+};
+
+export type Option = RadioOption | ToggleOption;
+
+// Option group structure
+export type OptionGroup = {
+  title?: string;
+  options: Option[];
+};
+
+interface PlatformDropdownProps {
+  trigger?: React.ReactNode;
+  title?: string;
+  groups: OptionGroup[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onOptionSelect?: (value?: any) => void;
+  expoUIConfig?: {
+    hostStyle?: any;
+  };
+  bottomSheetConfig?: {
+    enableDynamicSizing?: boolean;
+    enablePanDownToClose?: boolean;
+  };
+}
+
+const ToggleSwitch: React.FC<{ value: boolean }> = ({ value }) => (
+  <View
+    className={`w-12 h-7 rounded-full ${value ? "bg-purple-600" : "bg-neutral-600"} flex-row items-center`}
+  >
+    <View
+      className={`w-5 h-5 rounded-full bg-white shadow-md transform transition-transform ${
+        value ? "translate-x-6" : "translate-x-1"
+      }`}
+    />
+  </View>
+);
+
+const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
+  option,
+  isLast,
+}) => {
+  const isToggle = option.type === "toggle";
+  const handlePress = isToggle ? option.onToggle : option.onPress;
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={handlePress}
+        disabled={option.disabled}
+        className={`px-4 py-3 flex flex-row items-center justify-between ${
+          option.disabled ? "opacity-50" : ""
+        }`}
+      >
+        <Text className='flex-1 text-white'>{option.label}</Text>
+        {isToggle ? (
+          <ToggleSwitch value={option.value} />
+        ) : option.selected ? (
+          <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
+        ) : (
+          <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
+        )}
+      </TouchableOpacity>
+      {!isLast && (
+        <View
+          style={{
+            height: StyleSheet.hairlineWidth,
+          }}
+          className='bg-neutral-700 mx-4'
+        />
+      )}
+    </>
+  );
+};
+
+const OptionGroupComponent: React.FC<{ group: OptionGroup }> = ({ group }) => (
+  <View className='mb-6'>
+    {group.title && (
+      <Text className='text-lg font-semibold mb-3 text-neutral-300'>
+        {group.title}
+      </Text>
+    )}
+    <View
+      style={{
+        borderRadius: 12,
+        overflow: "hidden",
+      }}
+      className='bg-neutral-800 rounded-xl overflow-hidden'
+    >
+      {group.options.map((option, index) => (
+        <OptionItem
+          key={index}
+          option={option}
+          isLast={index === group.options.length - 1}
+        />
+      ))}
+    </View>
+  </View>
+);
+
+const BottomSheetContent: React.FC<{
+  title?: string;
+  groups: OptionGroup[];
+  onOptionSelect?: (value?: any) => void;
+}> = ({ title, groups, onOptionSelect }) => {
+  const insets = useSafeAreaInsets();
+
+  // Wrap the groups to call onOptionSelect when an option is pressed
+  const wrappedGroups = groups.map((group) => ({
+    ...group,
+    options: group.options.map((option) => {
+      if (option.type === "radio") {
+        return {
+          ...option,
+          onPress: () => {
+            option.onPress();
+            onOptionSelect?.(option.value);
+          },
+        };
+      }
+      if (option.type === "toggle") {
+        return {
+          ...option,
+          onToggle: () => {
+            option.onToggle();
+            onOptionSelect?.(option.value);
+          },
+        };
+      }
+      return option;
+    }),
+  }));
+
+  return (
+    <View
+      className='px-4 pb-8 pt-2'
+      style={{
+        paddingLeft: Math.max(16, insets.left),
+        paddingRight: Math.max(16, insets.right),
+      }}
+    >
+      {title && <Text className='font-bold text-2xl mb-6'>{title}</Text>}
+      {wrappedGroups.map((group, index) => (
+        <OptionGroupComponent key={index} group={group} />
+      ))}
+    </View>
+  );
+};
+
+export function PlatformDropdown({
+  trigger,
+  title,
+  groups,
+  open,
+  onOpenChange,
+  onOptionSelect,
+  expoUIConfig,
+  bottomSheetConfig,
+}: PlatformDropdownProps) {
+  const { showModal, hideModal } = useGlobalModal();
+
+  const handlePress = () => {
+    if (Platform.OS === "android") {
+      onOpenChange?.(true);
+      showModal(
+        <BottomSheetContent
+          title={title}
+          groups={groups}
+          onOptionSelect={onOptionSelect}
+        />,
+        {
+          enableDynamicSizing: bottomSheetConfig?.enableDynamicSizing ?? true,
+          enablePanDownToClose: bottomSheetConfig?.enablePanDownToClose ?? true,
+        },
+      );
+    }
+  };
+
+  // Close modal when open prop changes to false
+  useEffect(() => {
+    if (Platform.OS === "android" && open === false) {
+      hideModal();
+    }
+  }, [open, hideModal]);
+
+  if (Platform.OS === "ios") {
+    console.log("[PlatformDropdown iOS] Rendering with groups:", groups.length);
+
+    return (
+      <Host style={expoUIConfig?.hostStyle}>
+        <ContextMenu>
+          <ContextMenu.Trigger>
+            <View className='w-9 h-9 flex items-center justify-center'>
+              {trigger || <Button variant='bordered'>Show Menu</Button>}
+            </View>
+          </ContextMenu.Trigger>
+          <ContextMenu.Items>
+            {groups.flatMap((group, groupIndex) => {
+              // Check if this group has radio options
+              const radioOptions = group.options.filter(
+                (opt) => opt.type === "radio",
+              ) as RadioOption[];
+              const toggleOptions = group.options.filter(
+                (opt) => opt.type === "toggle",
+              ) as ToggleOption[];
+
+              console.log(
+                `[PlatformDropdown iOS] Group ${groupIndex}: ${radioOptions.length} radio, ${toggleOptions.length} toggle`,
+              );
+
+              const items = [];
+
+              // Add Picker for radio options if present
+              if (radioOptions.length > 0) {
+                items.push(
+                  <Picker
+                    key={`picker-${groupIndex}`}
+                    label={group.title || "Options"}
+                    options={radioOptions.map((opt) => opt.label)}
+                    variant='menu'
+                    selectedIndex={radioOptions.findIndex(
+                      (opt) => opt.selected,
+                    )}
+                    onOptionSelected={(event: any) => {
+                      console.log(
+                        "[PlatformDropdown iOS] Picker option selected:",
+                        event.nativeEvent.index,
+                      );
+                      const index = event.nativeEvent.index;
+                      const selectedOption = radioOptions[index];
+                      selectedOption?.onPress();
+                      onOptionSelect?.(selectedOption?.value);
+                    }}
+                  />,
+                );
+              }
+
+              // Add Buttons for toggle options
+              toggleOptions.forEach((option, optionIndex) => {
+                items.push(
+                  <Button
+                    key={`toggle-${groupIndex}-${optionIndex}`}
+                    systemImage={
+                      option.value ? "checkmark.circle.fill" : "circle"
+                    }
+                    onPress={() => {
+                      console.log(
+                        "[PlatformDropdown iOS] Toggle pressed:",
+                        option.label,
+                      );
+                      option.onToggle();
+                      onOptionSelect?.(option.value);
+                    }}
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </Button>,
+                );
+              });
+
+              return items;
+            })}
+          </ContextMenu.Items>
+        </ContextMenu>
+      </Host>
+    );
+  }
+
+  // Android: Trigger button for bottom modal
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      {trigger || <Text className='text-white'>Open Menu</Text>}
+    </TouchableOpacity>
+  );
+}
diff --git a/components/SubtitleTrackSelector.tsx b/components/SubtitleTrackSelector.tsx
index 4e97c422..7147f90f 100644
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { tc } from "@/utils/textTools";
 import { Text } from "./common/Text";
-import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -103,7 +103,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
         maxWidth: 200,
       }}
     >
-      <PlatformOptionsMenu
+      <PlatformDropdown
         groups={optionGroups}
         trigger={trigger}
         title={t("item_card.subtitles")}
diff --git a/components/common/Dropdown.tsx b/components/common/Dropdown.tsx
index bcf698c0..e2795d12 100644
--- a/components/common/Dropdown.tsx
+++ b/components/common/Dropdown.tsx
@@ -8,7 +8,7 @@ import {
 import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import DisabledSetting from "@/components/settings/DisabledSetting";
-import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
+import { type OptionGroup, PlatformDropdown } from "../PlatformDropdown";
 
 interface Props<T> {
   data: T[];
@@ -44,29 +44,6 @@ const Dropdown = <T,>({
     }
   }, [selected, onSelected]);
 
-  const optionGroups: OptionGroup[] = useMemo(
-    () => [
-      {
-        id: "dropdown-items",
-        title: label,
-        options: data.map((item) => {
-          const key = keyExtractor(item);
-          const isSelected =
-            selected?.some((s) => keyExtractor(s) === key) || false;
-
-          return {
-            id: key,
-            type: multiple ? "checkbox" : ("radio" as const),
-            groupId: "dropdown-items",
-            label: titleExtractor(item) || key,
-            ...(multiple ? { checked: isSelected } : { selected: isSelected }),
-          };
-        }),
-      },
-    ],
-    [data, selected, multiple, keyExtractor, titleExtractor, label],
-  );
-
   const handleOptionSelect = (optionId: string, value?: any) => {
     const selectedItem = data.find((item) => keyExtractor(item) === optionId);
     if (!selectedItem) return;
@@ -91,6 +68,45 @@ const Dropdown = <T,>({
     }
   };
 
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        title: label,
+        options: data.map((item) => {
+          const key = keyExtractor(item);
+          const isSelected =
+            selected?.some((s) => keyExtractor(s) === key) || false;
+
+          if (multiple) {
+            return {
+              type: "toggle" as const,
+              label: titleExtractor(item) || key,
+              value: isSelected,
+              onToggle: () => handleOptionSelect(key, !isSelected),
+            };
+          }
+
+          return {
+            type: "radio" as const,
+            label: titleExtractor(item) || key,
+            value: key,
+            selected: isSelected,
+            onPress: () => handleOptionSelect(key),
+          };
+        }),
+      },
+    ],
+    [
+      data,
+      selected,
+      multiple,
+      keyExtractor,
+      titleExtractor,
+      label,
+      handleOptionSelect,
+    ],
+  );
+
   const getDisplayValue = () => {
     if (selected?.length !== undefined && selected.length > 0) {
       return selected.map(titleExtractor).join(",");
@@ -120,7 +136,7 @@ const Dropdown = <T,>({
 
   return (
     <DisabledSetting disabled={disabled === true} showText={false} {...props}>
-      <PlatformOptionsMenu
+      <PlatformDropdown
         groups={optionGroups}
         trigger={trigger}
         title={label}
diff --git a/components/series/SeasonDropdown.tsx b/components/series/SeasonDropdown.tsx
index cb1d51e9..2979365b 100644
--- a/components/series/SeasonDropdown.tsx
+++ b/components/series/SeasonDropdown.tsx
@@ -1,9 +1,9 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { t } from "i18next";
-import { useEffect, useMemo, useState } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
+import { useEffect, useMemo } from "react";
+import { Platform, View } from "react-native";
 import { Text } from "../common/Text";
-import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
+import { PlatformDropdown } from "../PlatformDropdown";
 
 type Props = {
   item: BaseItemDto;
@@ -31,7 +31,6 @@ export const SeasonDropdown: React.FC<Props> = ({
   onSelect,
 }) => {
   const isTv = Platform.isTV;
-  const [open, setOpen] = useState(false);
 
   const keys = useMemo<SeasonKeys>(
     () =>
@@ -57,10 +56,9 @@ export const SeasonDropdown: React.FC<Props> = ({
   const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
     Number(a[keys.index]) - Number(b[keys.index]);
 
-  const optionGroups: OptionGroup[] = useMemo(
+  const optionGroups = useMemo(
     () => [
       {
-        id: "seasons",
         title: t("item_card.seasons"),
         options:
           seasons?.sort(sortByIndex).map((season: any) => {
@@ -69,28 +67,18 @@ export const SeasonDropdown: React.FC<Props> = ({
               season.Name ||
               `Season ${season.IndexNumber}`;
             return {
-              id: `${season.Id || season.IndexNumber}`,
               type: "radio" as const,
-              groupId: "seasons",
               label: title,
+              value: season.Id || season.IndexNumber,
               selected: Number(season[keys.index]) === Number(seasonIndex),
+              onPress: () => onSelect(season),
             };
           }) || [],
       },
     ],
-    [seasons, keys, seasonIndex],
+    [seasons, keys, seasonIndex, onSelect],
   );
 
-  const handleSeasonSelect = (optionId: string) => {
-    const selectedSeason = seasons?.find(
-      (season: any) => `${season.Id || season.IndexNumber}` === optionId,
-    );
-    if (selectedSeason) {
-      onSelect(selectedSeason);
-    }
-    setOpen(false);
-  };
-
   useEffect(() => {
     if (isTv) return;
     if (seasons && seasons.length > 0 && seasonIndex === undefined) {
@@ -132,36 +120,19 @@ export const SeasonDropdown: React.FC<Props> = ({
     keys,
   ]);
 
-  const trigger = (
-    <View className='flex flex-row'>
-      <TouchableOpacity
-        className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'
-        onPress={() => setOpen(true)}
-      >
-        <Text>
-          {t("item_card.season")} {seasonIndex}
-        </Text>
-      </TouchableOpacity>
-    </View>
-  );
-
   if (isTv) return null;
 
   return (
-    <PlatformOptionsMenu
+    <PlatformDropdown
       groups={optionGroups}
-      trigger={trigger}
+      trigger={
+        <View className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+          <Text>
+            {t("item_card.season")} {seasonIndex}
+          </Text>
+        </View>
+      }
       title={t("item_card.seasons")}
-      open={open}
-      onOpenChange={setOpen}
-      onOptionSelect={handleSeasonSelect}
-      expoUIConfig={{
-        hostStyle: { flex: 1 },
-      }}
-      bottomSheetConfig={{
-        enableDynamicSizing: true,
-        enablePanDownToClose: true,
-      }}
     />
   );
 };
diff --git a/components/settings/AppLanguageSelector.tsx b/components/settings/AppLanguageSelector.tsx
index 0aefe3ee..c384a897 100644
--- a/components/settings/AppLanguageSelector.tsx
+++ b/components/settings/AppLanguageSelector.tsx
@@ -1,12 +1,12 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { APP_LANGUAGES } from "@/i18n";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
+import { PlatformDropdown } from "../PlatformDropdown";
 
 interface Props extends ViewProps {}
 
@@ -14,55 +14,32 @@ export const AppLanguageSelector: React.FC<Props> = () => {
   const isTv = Platform.isTV;
   const { settings, updateSettings } = useSettings();
   const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
 
-  const optionGroups: OptionGroup[] = useMemo(() => {
+  const optionGroups = useMemo(() => {
     const options = [
       {
-        id: "system",
         type: "radio" as const,
-        groupId: "languages",
         label: t("home.settings.languages.system"),
+        value: "system",
         selected: !settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: undefined }),
       },
       ...APP_LANGUAGES.map((lang) => ({
-        id: lang.value,
         type: "radio" as const,
-        groupId: "languages",
         label: lang.label,
+        value: lang.value,
         selected: lang.value === settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: lang.value }),
       })),
     ];
 
     return [
       {
-        id: "languages",
         title: t("home.settings.languages.title"),
         options,
       },
     ];
-  }, [settings?.preferedLanguage, t]);
-
-  const handleOptionSelect = (optionId: string) => {
-    if (optionId === "system") {
-      updateSettings({ preferedLanguage: undefined });
-    } else {
-      updateSettings({ preferedLanguage: optionId });
-    }
-    setOpen(false);
-  };
-
-  const trigger = (
-    <TouchableOpacity
-      className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'
-      onPress={() => setOpen(true)}
-    >
-      <Text>
-        {APP_LANGUAGES.find((l) => l.value === settings?.preferedLanguage)
-          ?.label || t("home.settings.languages.system")}
-      </Text>
-    </TouchableOpacity>
-  );
+  }, [settings?.preferedLanguage, t, updateSettings]);
 
   if (isTv) return null;
   if (!settings) return null;
@@ -71,20 +48,18 @@ export const AppLanguageSelector: React.FC<Props> = () => {
     <View>
       <ListGroup title={t("home.settings.languages.title")}>
         <ListItem title={t("home.settings.languages.app_language")}>
-          <PlatformOptionsMenu
+          <PlatformDropdown
             groups={optionGroups}
-            trigger={trigger}
+            trigger={
+              <View className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+                <Text>
+                  {APP_LANGUAGES.find(
+                    (l) => l.value === settings?.preferedLanguage,
+                  )?.label || t("home.settings.languages.system")}
+                </Text>
+              </View>
+            }
             title={t("home.settings.languages.title")}
-            open={open}
-            onOpenChange={setOpen}
-            onOptionSelect={handleOptionSelect}
-            expoUIConfig={{
-              hostStyle: { flex: 1 },
-            }}
-            bottomSheetConfig={{
-              enableDynamicSizing: true,
-              enablePanDownToClose: true,
-            }}
           />
         </ListItem>
       </ListGroup>
diff --git a/components/settings/AudioToggles.tsx b/components/settings/AudioToggles.tsx
index 966311a1..aa6d2bd6 100644
--- a/components/settings/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -1,20 +1,19 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
+import { PlatformDropdown } from "../PlatformDropdown";
 import { useMedia } from "./MediaContext";
 
 interface Props extends ViewProps {}
 
 export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
-  const [open, setOpen] = useState(false);
 
   const media = useMedia();
   const { pluginSettings } = useSettings();
@@ -22,69 +21,39 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
-  const optionGroups: OptionGroup[] = useMemo(() => {
+  const optionGroups = useMemo(() => {
     const options = [
       {
-        id: "none",
         type: "radio" as const,
-        groupId: "audio-languages",
         label: t("home.settings.audio.none"),
+        value: "none",
         selected: !settings?.defaultAudioLanguage,
+        onPress: () => updateSettings({ defaultAudioLanguage: null }),
       },
       ...(cultures?.map((culture) => ({
-        id:
-          culture.ThreeLetterISOLanguageName ||
-          culture.DisplayName ||
-          "unknown",
         type: "radio" as const,
-        groupId: "audio-languages",
         label:
           culture.DisplayName ||
           culture.ThreeLetterISOLanguageName ||
           "Unknown",
+        value:
+          culture.ThreeLetterISOLanguageName ||
+          culture.DisplayName ||
+          "unknown",
         selected:
           culture.ThreeLetterISOLanguageName ===
           settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName,
+        onPress: () => updateSettings({ defaultAudioLanguage: culture }),
       })) || []),
     ];
 
     return [
       {
-        id: "audio-languages",
         title: t("home.settings.audio.language"),
         options,
       },
     ];
-  }, [cultures, settings?.defaultAudioLanguage, t]);
-
-  const handleOptionSelect = (optionId: string) => {
-    if (optionId === "none") {
-      updateSettings({ defaultAudioLanguage: null });
-    } else {
-      const selectedCulture = cultures?.find(
-        (culture) =>
-          (culture.ThreeLetterISOLanguageName || culture.DisplayName) ===
-          optionId,
-      );
-      if (selectedCulture) {
-        updateSettings({ defaultAudioLanguage: selectedCulture });
-      }
-    }
-    setOpen(false);
-  };
-
-  const trigger = (
-    <TouchableOpacity
-      className='flex flex-row items-center justify-between py-3 pl-3'
-      onPress={() => setOpen(true)}
-    >
-      <Text className='mr-1 text-[#8E8D91]'>
-        {settings?.defaultAudioLanguage?.DisplayName ||
-          t("home.settings.audio.none")}
-      </Text>
-      <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
-    </TouchableOpacity>
-  );
+  }, [cultures, settings?.defaultAudioLanguage, t, updateSettings]);
 
   if (isTv) return null;
   if (!settings) return null;
@@ -112,20 +81,22 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
         <ListItem title={t("home.settings.audio.audio_language")}>
-          <PlatformOptionsMenu
+          <PlatformDropdown
             groups={optionGroups}
-            trigger={trigger}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {settings?.defaultAudioLanguage?.DisplayName ||
+                    t("home.settings.audio.none")}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
             title={t("home.settings.audio.language")}
-            open={open}
-            onOpenChange={setOpen}
-            onOptionSelect={handleOptionSelect}
-            expoUIConfig={{
-              hostStyle: { flex: 1 },
-            }}
-            bottomSheetConfig={{
-              enableDynamicSizing: true,
-              enablePanDownToClose: true,
-            }}
           />
         </ListItem>
       </ListGroup>
diff --git a/components/stacks/NestedTabPageStack.tsx b/components/stacks/NestedTabPageStack.tsx
index ec4ba1e8..41e6f880 100644
--- a/components/stacks/NestedTabPageStack.tsx
+++ b/components/stacks/NestedTabPageStack.tsx
@@ -1,5 +1,6 @@
 import type { ParamListBase, RouteProp } from "@react-navigation/native";
 import type { NativeStackNavigationOptions } from "@react-navigation/native-stack";
+import { Platform } from "react-native";
 import { HeaderBackButton } from "../common/HeaderBackButton";
 
 type ICommonScreenOptions =
@@ -12,9 +13,9 @@ type ICommonScreenOptions =
 export const commonScreenOptions: ICommonScreenOptions = {
   title: "",
   headerShown: true,
-  headerTransparent: true,
+  headerTransparent: Platform.OS === "ios",
   headerShadowVisible: false,
-  headerBlurEffect: "none",
+  headerBlurEffect: Platform.OS === "ios" ? "none" : undefined,
   headerLeft: () => <HeaderBackButton />,
 };
 
diff --git a/package.json b/package.json
index 147bba61..e2a170f8 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@bottom-tabs/react-navigation": "^0.11.2",
     "@expo/metro-runtime": "~6.1.1",
     "@expo/react-native-action-sheet": "^4.1.1",
-    "@expo/ui": "~0.2.0-beta.4",
+    "@expo/ui": "^0.2.0-beta.4",
     "@expo/vector-icons": "^15.0.2",
     "@gorhom/bottom-sheet": "^5.1.0",
     "@jellyfin/sdk": "^0.11.0",