diff --git a/src/api/context/VideoPlayerContext.tsx b/src/api/context/VideoPlayerContext.tsx
index 3b72020..983104e 100644
--- a/src/api/context/VideoPlayerContext.tsx
+++ b/src/api/context/VideoPlayerContext.tsx
@@ -33,6 +33,7 @@ export interface VideoPlayerAPI {
     setMuted: (m: boolean) => void;
 
     seekTo: (ts: number) => void;
+    seekToChapterOffset: (offset: number) => void;
 };
 
 // @ts-ignore
diff --git a/src/api/context/VideoPlayerProvider.tsx b/src/api/context/VideoPlayerProvider.tsx
index ef3d60e..24c7a77 100644
--- a/src/api/context/VideoPlayerProvider.tsx
+++ b/src/api/context/VideoPlayerProvider.tsx
@@ -52,6 +52,10 @@ export const VideoPlayerProvider = ({
         setAvailableFormats([]);
         setActiveFormat(null);
         setVideoInfo(null);
+        setActiveChapters({
+            chapters: [],
+            type: "video",
+        });
         if(!videoID) return;
         
         try {
@@ -81,7 +85,11 @@ export const VideoPlayerProvider = ({
         if(!videoInfo) return;
 
         setAvailableFormats(videoInfo.formats);
-        setActiveFormat(videoInfo.formats[0]);
+        setActiveFormat(videoInfo.formats
+            .filter(f => f.type == "basic")
+            .filter(f => currentInstance.type != "invidious" || f.isProxied)
+            .findLast(x=>x)
+        );
     }, [videoInfo]);
 
     useEffect(() => {
@@ -113,6 +121,27 @@ export const VideoPlayerProvider = ({
         setPlayState("playing");
     });
 
+    const seekTo = (ts: number) => {
+        videoElement.currentTime = clamp(0, ts, videoElement.duration);
+    };
+
+    const seekToChapterOffset = (offset: number = 0) => {
+        let currentChapterIndex = activeChapters.chapters.findIndex(c => c.time > videoElement.currentTime) - 1;
+        let currentChapter = activeChapters.chapters[currentChapterIndex];
+        if(!currentChapter) {
+            if(offset == 1) videoElement.fastSeek(videoElement.duration);
+            return;
+        }
+        let chapterProgress = videoElement.currentTime - currentChapter.time;
+        let targetIndex = currentChapterIndex + offset;
+        if(offset == -1) {
+            if(chapterProgress > 3) targetIndex++;
+        }
+        let target = activeChapters.chapters[targetIndex];
+        
+        videoElement.fastSeek(clamp(0, target?.time || 0, videoElement.duration));
+    }
+
     return (
         <VideoPlayerContext.Provider value={{
             videoElement,
@@ -165,9 +194,8 @@ export const VideoPlayerProvider = ({
             muted,
             setMuted,
 
-            seekTo: (ts: number) => {
-                videoElement.currentTime = clamp(0, ts, videoElement.duration);
-            },
+            seekTo,
+            seekToChapterOffset,
         }}>
             {children}
         </VideoPlayerContext.Provider>
diff --git a/src/components/cards/FormatCard.tsx b/src/components/cards/FormatCard.tsx
new file mode 100644
index 0000000..3aac717
--- /dev/null
+++ b/src/components/cards/FormatCard.tsx
@@ -0,0 +1,45 @@
+import { Code, Grid, Group, Paper, Stack, Text } from "@mantine/core";
+import { VideoFormat } from "../../api/types/format";
+import { IconCheck } from "@tabler/icons-react";
+
+export const FormatCard = ({
+    format,
+    isSelected,
+    onClick,
+}: {
+    format: VideoFormat,
+    isSelected?: boolean,
+    onClick?: () => void,
+}) => {
+    return (
+        <Paper w="100%" withBorder p="xs" bg={isSelected ? "dark.6" : undefined} style={{
+            cursor: "pointer",
+        }} onClick={onClick}>
+            <Grid>
+                <Grid.Col span="content">
+                    <Stack h="100%" justify="center" align="center">
+                        {isSelected && (
+                            <IconCheck color="var(--mantine-color-green-filled)" />
+                        )}
+                    </Stack>
+                </Grid.Col>
+                <Grid.Col span="auto">
+                    <Stack align="start" gap={0}>
+                        <Group w="100%" justify="space-between">
+                            <Code>
+                                {format.id}
+                            </Code>
+                            <Code>
+                                {format.itag}
+                            </Code>
+                        </Group>
+                        <Text>
+                            {format.mimeType}
+                        </Text>
+                    </Stack>
+                </Grid.Col>
+            </Grid>
+        </Paper>
+    );
+};
+
diff --git a/src/components/options/OptionsContext.tsx b/src/components/options/OptionsContext.tsx
index bd3e64b..6d9a200 100644
--- a/src/components/options/OptionsContext.tsx
+++ b/src/components/options/OptionsContext.tsx
@@ -1,8 +1,9 @@
 import { useDisclosure, useHotkeys } from "@mantine/hooks";
-import { createContext, useState } from "react";
+import { createContext, useCallback, useState } from "react";
 import { useSoundEffect } from "../../hooks/useSoundEffect";
-import { Drawer, ScrollArea } from "@mantine/core";
+import { Button, Drawer, Group, ScrollArea, Text } from "@mantine/core";
 import { OptionsRouter } from "./OptionsRouter";
+import { IconArrowLeft } from "@tabler/icons-react";
 
 export type OptionsView = "main" | "instanceSelect" | "openWith" | "formatSelect";
 
@@ -17,11 +18,11 @@ export interface OptionsContextAPI {
 
 export const OptionsContext = createContext<OptionsContextAPI>({
     opened: false,
-    open: () => {},
-    close: () => {},
-    toggle: () => {},
+    open: () => { },
+    close: () => { },
+    toggle: () => { },
     view: "main",
-    setView: () => {},
+    setView: () => { },
 });
 
 export const OptionsProvider = ({ children }: React.PropsWithChildren) => {
@@ -30,24 +31,24 @@ export const OptionsProvider = ({ children }: React.PropsWithChildren) => {
     const openOptionsSfx = useSoundEffect(["openSettings"]);
     const closeOptionsSfx = useSoundEffect(["closeSettings"]);
 
-    const open = () => {
-        if(!opened) openOptionsSfx();
+    const open = useCallback(() => {
+        if (!opened) openOptionsSfx();
         handlers.open();
-    };
+    }, [opened]);
 
-    const close = () => {
-        if(opened) closeOptionsSfx();
+    const close = useCallback(() => {
+        if (opened) closeOptionsSfx();
         handlers.close();
         setView("main");
-    };
+    }, [opened]);
 
-    const toggle = () => {
-        if(opened) {
+    const toggle = useCallback(() => {
+        if (opened) {
             close();
         } else {
             open();
         }
-    };
+    }, [opened]);
 
     useHotkeys([
         ["o", () => toggle()],
@@ -56,7 +57,7 @@ export const OptionsProvider = ({ children }: React.PropsWithChildren) => {
     useHotkeys([
         ["Ctrl + o", () => toggle()],
     ], [], true);
-    
+
     return (
         <OptionsContext.Provider
             value={{
@@ -70,11 +71,40 @@ export const OptionsProvider = ({ children }: React.PropsWithChildren) => {
         >
             <Drawer
                 opened={opened}
+                keepMounted
                 size="md"
                 onClose={() => close()}
                 position="right"
-                title="Options"
                 scrollAreaComponent={ScrollArea.Autosize}
+                styles={{
+                    title: {
+                        width: "100%",
+                    }
+                }}
+                title={(
+                    <Group w="100%" grow>
+                        {view !== "main" && (
+                            <Button
+                                variant="light"
+                                color="violet"
+                                leftSection={<IconArrowLeft />}
+                                onClick={() => setView("main")}
+                                fullWidth
+                                size="compact-md"
+                            >
+                                Back
+                            </Button>
+                        )}
+                        <Text>
+                            {({
+                                main: "Options",
+                                formatSelect: "Select Format",
+                                instanceSelect: "Select Instance",
+                                openWith: "Open with...",
+                            } as Record<OptionsView, string>)[view]}
+                        </Text>
+                    </Group>
+                )}
             >
                 <OptionsRouter />
             </Drawer>
diff --git a/src/components/options/OptionsRouter.tsx b/src/components/options/OptionsRouter.tsx
index 0e9e02d..cf2a261 100644
--- a/src/components/options/OptionsRouter.tsx
+++ b/src/components/options/OptionsRouter.tsx
@@ -4,6 +4,7 @@ import { OptionsContext } from "./OptionsContext";
 import { OptionsMainView } from "./views/MainView";
 import { OptionsInstanceView } from "./views/InstanceView";
 import { OptionsOpenWithView } from "./views/OpenWith";
+import { OptionsFormatView } from "./views/FormatView";
 
 export const OptionsRouter = () => {
     const { view } = useContext(OptionsContext);
@@ -13,6 +14,7 @@ export const OptionsRouter = () => {
             {view == "main" && <OptionsMainView />}
             {view == "instanceSelect" && <OptionsInstanceView />}
             {view == "openWith" && <OptionsOpenWithView />}
+            {view == "formatSelect" && <OptionsFormatView />}
         </Stack>
     );
 };
diff --git a/src/components/options/comps/FormatSelect.tsx b/src/components/options/comps/FormatSelect.tsx
index 506f7bd..8a772c5 100644
--- a/src/components/options/comps/FormatSelect.tsx
+++ b/src/components/options/comps/FormatSelect.tsx
@@ -1,37 +1,32 @@
-import { Group, Select, Stack } from "@mantine/core";
+import { Grid, Select, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useContext } from "react";
 import { VideoPlayerContext } from "../../../api/context/VideoPlayerContext";
-import { IconCheck } from "@tabler/icons-react";
+import { FormatCard } from "../../cards/FormatCard";
+import { OptionsContext } from "../OptionsContext";
+import { IconArrowRight } from "@tabler/icons-react";
 
 export const FormatSelect = () => {
-    const {
-        availableFormats,
-        activeFormat,
-        setFormat,
-    } = useContext(VideoPlayerContext);
+    const { setView } = useContext(OptionsContext);
+    const { activeFormat } = useContext(VideoPlayerContext);
 
     return (
-        <Select
-            w="100%"
-            label={"Format"}
-            value={activeFormat.itag}
-            onChange={(v) => setFormat(v)}
-            data={availableFormats.map((f, i) => f.id)}
-            renderOption={({ option: { value }, checked }) => (
-                <Group justify="space-between">
-                    <Group>
-                        <Stack>
-                            {availableFormats.find(x => x.id == value).id}
-                            {availableFormats.find(x => x.id == value).itag}
-                            {availableFormats.find(x => x.id == value).mimeType}
-                            {availableFormats.find(x => x.id == value).fps}
-                        </Stack>
-                    </Group>
-                    <Group>
-                        {checked && <IconCheck />}
-                    </Group>
-                </Group>
-            )}
-        />
+        <Stack w="100%" gap={0}>
+            <Text>
+                Selected Format
+            </Text>
+            <UnstyledButton
+                className="hoverable"
+                variant="subtle"
+                color="violet"
+                onClick={() => setView("formatSelect")}
+            >
+                {activeFormat ? (
+                    <FormatCard
+                        format={activeFormat}
+                        isSelected
+                    />
+                ) : "Loading..."}
+            </UnstyledButton>
+        </Stack>
     );
 };
diff --git a/src/components/options/links/OptionsButton.tsx b/src/components/options/links/OptionsButton.tsx
index 8426eed..7029fcb 100644
--- a/src/components/options/links/OptionsButton.tsx
+++ b/src/components/options/links/OptionsButton.tsx
@@ -4,14 +4,14 @@ import { useContext } from "react";
 import { OptionsContext } from "../OptionsContext";
 
 export const OptionsButton = () => {
-    const { toggle } = useContext(OptionsContext);
+    const { open } = useContext(OptionsContext);
 
     return (
         <Tooltip label="Options (o)">
             <ActionIcon
                 variant="light"
                 color="violet"
-                onClick={() => toggle()}
+                onClick={() => open()}
             >
                 <IconSettings />
             </ActionIcon>
diff --git a/src/components/options/views/FormatView.tsx b/src/components/options/views/FormatView.tsx
new file mode 100644
index 0000000..204c944
--- /dev/null
+++ b/src/components/options/views/FormatView.tsx
@@ -0,0 +1,70 @@
+import { useContext, useState } from "react";
+import { OptionsContext } from "../OptionsContext";
+import { Button, Checkbox, Group, SegmentedControl, Stack, Text } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { VideoPlayerContext } from "../../../api/context/VideoPlayerContext";
+import { FormatCard } from "../../cards/FormatCard";
+import { VideoFormatType } from "../../../api/types/format";
+
+export const OptionsFormatView = () => {
+    const { setView } = useContext(OptionsContext);
+    const {
+        availableFormats,
+        activeFormat,
+        setFormat,
+    } = useContext(VideoPlayerContext);
+
+    const [filterFormatType, setFilterFormatType] = useState<VideoFormatType | "all">("basic");
+    const [filterProxy, setFilterProxy] = useState<boolean | null>(null);
+
+    const options = availableFormats
+        .filter(f => filterFormatType == "all" || f.type == filterFormatType)
+        .filter(f => filterProxy === null || f.isProxied == filterProxy);
+
+    return (
+        <Stack w="100%">
+            <Stack w="100%">
+                <Group w="100%" justify="space-between">
+                    <Text>
+                        Format Types
+                    </Text>
+                    <SegmentedControl
+                        data={[
+                            "all",
+                            "basic",
+                            "adaptive",
+                            "dash",
+                            "hls",
+                        ]}
+                        value={filterFormatType}
+                        onChange={(v) => setFilterFormatType(v as VideoFormatType | "all")}
+                    />
+                </Group>
+                <Group w="100%" justify="space-between">
+                    <Text>
+                        Proxied
+                    </Text>
+                    <SegmentedControl
+                        data={[
+                            "all",
+                            "true",
+                            "false",
+                        ]}
+                        value={filterProxy === null ? "all" : String(filterProxy)}
+                        onChange={(v) => setFilterProxy(v == "all" ? null : (v == "true" ? true : false))}
+                    />
+                </Group>
+            </Stack>
+            <Stack w="100%">
+                {options.map((format, i) => (
+                    <FormatCard
+                        format={format}
+                        isSelected={activeFormat.id == format.id}
+                        onClick={() => setFormat(format.id)}
+                        key={i}
+                    />
+                ))}
+            </Stack>
+        </Stack>
+    );
+};
diff --git a/src/components/options/views/InstanceView.tsx b/src/components/options/views/InstanceView.tsx
index c5b94a9..fc37b54 100644
--- a/src/components/options/views/InstanceView.tsx
+++ b/src/components/options/views/InstanceView.tsx
@@ -7,13 +7,11 @@ import { Instance } from "../../../api/types/instances";
 import { InstanceCard } from "../../cards/InstanceCard";
 
 export const OptionsInstanceView = () => {
-    const { setView } = useContext(OptionsContext);
     const {
         availableInstances,
         currentInstance,
         setInstance,
         isRefreshing,
-        refreshAvailableInstances,
         customInstance,
         setCustomInstance,
         favourited,
@@ -57,98 +55,84 @@ export const OptionsInstanceView = () => {
     ));
 
     return (
-        <Stack align="center" w="100%">
-            <Group w="100%" justify="start">
-                <Button
-                    variant="light"
-                    color="violet"
-                    leftSection={<IconArrowLeft />}
-                    onClick={() => setView("main")}
-                    fullWidth
-                    size="compact-md"
-                >
-                    Back
-                </Button>
-            </Group>
-            <Stack w="100%">
-                <Tabs value={tab} onChange={(v) => {
-                    setTab(v as Instance["type"] | "custom" | "favs");
-                    setCustomInstance(v == "custom");
-                }}>
-                    <Tabs.List grow>
-                        <Tabs.Tab value="favs">
-                            <IconStar size="1em" />
-                        </Tabs.Tab>
-                        <Tabs.Tab value="lighttube">
-                            LightTube
-                        </Tabs.Tab>
-                        <Tabs.Tab value="invidious">
-                            Invidious
-                        </Tabs.Tab>
-                        <Tabs.Tab value="custom">
-                            Custom
-                        </Tabs.Tab>
-                    </Tabs.List>
+        <Stack w="100%">
+            <Tabs value={tab} onChange={(v) => {
+                setTab(v as Instance["type"] | "custom" | "favs");
+                setCustomInstance(v == "custom");
+            }}>
+                <Tabs.List grow>
+                    <Tabs.Tab value="favs">
+                        <IconStar size="1em" />
+                    </Tabs.Tab>
+                    <Tabs.Tab value="lighttube">
+                        LightTube
+                    </Tabs.Tab>
+                    <Tabs.Tab value="invidious">
+                        Invidious
+                    </Tabs.Tab>
+                    <Tabs.Tab value="custom">
+                        Custom
+                    </Tabs.Tab>
+                </Tabs.List>
 
-                    <Tabs.Panel value="favs">
-                        <Stack gap={0} w="100%" align="center">
-                            {instanceList}
-                            {!options.length && (
-                                <Text c="dimmed" p="md">
-                                    No favourited instances
-                                </Text>
-                            )}
-                        </Stack>
-                    </Tabs.Panel>
+                <Tabs.Panel value="favs">
+                    <Stack gap={0} w="100%" align="center">
+                        {instanceList}
+                        {!options.length && (
+                            <Text c="dimmed" p="md">
+                                No favourited instances
+                            </Text>
+                        )}
+                    </Stack>
+                </Tabs.Panel>
 
-                    {["lighttube", "invidious"].map((type, i) => (
-                        <Tabs.Panel
-                            value={type}
-                            key={i}
-                        >
-                            <InstanceSearch
-                                search={search}
-                                setSearch={setSearch}
-                            />
-                            {instanceList}
-                        </Tabs.Panel>
-                    ))}
+                {["lighttube", "invidious"].map((type, i) => (
+                    <Tabs.Panel
+                        value={type}
+                        key={i}
+                    >
+                        <InstanceSearch
+                            search={search}
+                            setSearch={setSearch}
+                        />
+                        {instanceList}
+                    </Tabs.Panel>
+                ))}
 
-                    <Tabs.Panel value="custom">
-                        <Stack w="100%" py="sm">
-                            <Stack gap="xs">
-                                <Group justify="space-between">
-                                    <Text>
-                                        Instance Type
-                                    </Text>
-                                    <SegmentedControl
-                                        data={[
-                                            { value: "lighttube", label: "LightTube" },
-                                            { value: "invidious", label: "Invidious" },
-                                        ]}
-                                        value={currentInstance.type}
-                                        onChange={(type: Instance["type"]) => setInstance({
-                                            ...currentInstance,
-                                            name: "Custom",
-                                            type,
-                                        })}
-                                    />
-                                </Group>
-                                <TextInput
-                                    label="URL"
-                                    description="URL of the instance without trailing /"
-                                    value={currentInstance.url}
-                                    onChange={(e) => setInstance({
+                <Tabs.Panel value="custom">
+                    <Stack w="100%" py="sm">
+                        <Stack gap="xs">
+                            <Group justify="space-between">
+                                <Text>
+                                    Instance Type
+                                </Text>
+                                <SegmentedControl
+                                    data={[
+                                        { value: "lighttube", label: "LightTube" },
+                                        { value: "invidious", label: "Invidious" },
+                                    ]}
+                                    value={currentInstance.type}
+                                    onChange={(type: Instance["type"]) => setInstance({
                                         ...currentInstance,
                                         name: "Custom",
-                                        url: e.currentTarget.value,
+                                        type,
                                     })}
                                 />
-                            </Stack>
+                            </Group>
+                            <TextInput
+                                label="URL"
+                                description="URL of the instance without trailing /"
+                                value={currentInstance.url}
+                                onChange={(e) => setInstance({
+                                    ...currentInstance,
+                                    name: "Custom",
+                                    url: e.currentTarget.value,
+                                })}
+                            />
                         </Stack>
-                    </Tabs.Panel>
-                </Tabs>
-            </Stack>
+                    </Stack>
+                </Tabs.Panel>
+            </Tabs>
         </Stack>
     );
 };
diff --git a/src/components/options/views/OpenWith.tsx b/src/components/options/views/OpenWith.tsx
index 3ebce57..83de157 100644
--- a/src/components/options/views/OpenWith.tsx
+++ b/src/components/options/views/OpenWith.tsx
@@ -1,28 +1,10 @@
-import { Button, Group, Stack } from "@mantine/core";
-import { IconArrowLeft } from "@tabler/icons-react";
+import { Stack } from "@mantine/core";
 import { useContext } from "react";
-import { OptionsContext } from "../OptionsContext";
 
 export const OptionsOpenWithView = () => {
-    const { setView } = useContext(OptionsContext);
-
     return (
-        <Stack align="center" w="100%">
-            <Group w="100%" justify="start">
-                <Button
-                    variant="light"
-                    color="violet"
-                    leftSection={<IconArrowLeft />}
-                    onClick={() => setView("main")}
-                    fullWidth
-                    size="compact-md"
-                >
-                    Back
-                </Button>
-            </Group>
-            <Stack w="100%">
-                meow
-            </Stack>
+        <Stack w="100%">
+            meow
         </Stack>
     );
 };
diff --git a/src/components/player/VideoPlayer.tsx b/src/components/player/VideoPlayer.tsx
index 397e656..5a2043c 100644
--- a/src/components/player/VideoPlayer.tsx
+++ b/src/components/player/VideoPlayer.tsx
@@ -1,20 +1,19 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { VideoPlayerContext } from "../../api/context/VideoPlayerContext"
-import { Box, Button, Drawer, Group, Loader, ScrollArea, Stack, Text, Title, Transition } from "@mantine/core";
+import { Box, Group, Loader, Stack, Text, Title, Transition } from "@mantine/core";
 import { PlayPauseButton } from "./controls/PlayPauseButton";
 import { PlayerTimestamp } from "./controls/PlayerTimestamp";
 import { VolumeControls } from "./controls/VolumeControls";
 import { ProgressBar } from "./bar/ProgressBar";
-import { useDisclosure, useDocumentTitle, useFullscreen, useHotkeys, useHover, useMergedRef } from "@mantine/hooks";
-import { IconAlertTriangle, IconReload } from "@tabler/icons-react";
+import { useDocumentTitle, useFullscreen, useHotkeys, useHover, useMergedRef } from "@mantine/hooks";
+import { IconAlertTriangle } from "@tabler/icons-react";
 import { FullscreenButton } from "./controls/FullscreenButton";
 import { OptionsButton } from "../options/links/OptionsButton";
-import { useSoundEffect } from "../../hooks/useSoundEffect";
 import { usePreference } from "../../api/pref/Preferences";
 import { ErrorMessage } from "../ui/ErrorMessage";
 
 export const VideoPlayer = () => {
-    const { videoElement, setVideoID, videoInfo, seekTo, togglePlay, playState, muted, setMuted, error, fetchVideoInfo } = useContext(VideoPlayerContext);
+    const { videoElement, seekToChapterOffset, videoInfo, seekTo, togglePlay, playState, muted, setMuted, error, fetchVideoInfo } = useContext(VideoPlayerContext);
     const containerRef = useRef<HTMLDivElement>(null);
     const { ref: fullscreenRef, fullscreen, toggle: toggleFullscreen } = useFullscreen();
     const keepControlsShown = usePreference("keepControlsShown");
@@ -34,6 +33,8 @@ export const VideoPlayer = () => {
     useHotkeys([
         ["ArrowLeft", () => seekTo(videoElement.currentTime - 5)],
         ["ArrowRight", () => seekTo(videoElement.currentTime + 5)],
+        ["Shift + ArrowRight", () => seekToChapterOffset(1)],
+        ["Shift + ArrowLeft", () => seekToChapterOffset(-1)],
         ["J", () => seekTo(videoElement.currentTime - 10)],
         ["L", () => seekTo(videoElement.currentTime + 10)],
         ["K", () => togglePlay()],
@@ -50,7 +51,7 @@ export const VideoPlayer = () => {
         fullscreenRef,
     );
 
-    const shouldShowControls = playState !== "error";
+    const shouldShowControls = keepControlsShown || hovered || (playState == "error");
 
     return (
         <Box w="100%" h="100%" className="videoPlayer" style={{ position: "relative" }} ref={mergedRef}>
@@ -65,7 +66,7 @@ export const VideoPlayer = () => {
                 ref={containerRef}
             />
             <Transition
-                mounted={keepControlsShown || hovered || (playState == "error")}
+                mounted={shouldShowControls}
                 keepMounted
             >
                 {(styles) => (