diff --git a/src/Laudiolin.tsx b/src/Laudiolin.tsx
index 91283a2..984606a 100644
--- a/src/Laudiolin.tsx
+++ b/src/Laudiolin.tsx
@@ -1,7 +1,10 @@
+import { useRef } from "react";
 import { SafeAreaView, StatusBar, View } from "react-native";
 
-import { BottomTabBar, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { NavigationContainer } from "@react-navigation/native";
+import { NavigationContainerRef } from "@react-navigation/core";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { BottomTabBar, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 
 import { HomeIcon, SearchIcon, SettingsIcon } from "@ui/Icons";
 
@@ -25,46 +28,50 @@ const Tab = createBottomTabNavigator();
 function Laudiolin(props: IProps) {
     const global = useGlobal();
 
+    const navigator = useRef<NavigationContainerRef<any>>(null);
+
     return (
         <>
             <StatusBar barStyle={"light-content"} />
 
             <SafeAreaView style={style.App} onLayout={props.onLoad}>
-                {
-                    global.showTrackPage && <NowPlaying />
-                }
-                {
-                    global.showLoginPage && <Login />
-                }
+                <GestureHandlerRootView>
+                    {
+                        global.showTrackPage && <NowPlaying navigation={navigator.current!} />
+                    }
+                    {
+                        global.showLoginPage && <Login />
+                    }
 
-                <View style={{
-                    ...style.App,
-                    display: global.showingAny() ? "none" : "flex"
-                }}>
-                    <NavigationContainer>
-                        <Tab.Navigator
-                            tabBar={props => (
-                                <>
-                                    <MediaPlayer />
-                                    <BottomTabBar {...props} />
-                                </>
-                            )}
-                            screenOptions={{
-                                headerShown: false,
-                                tabBarShowLabel: false,
-                                tabBarStyle: style.App_TabBar,
-                            }}
-                            sceneContainerStyle={style.App_Scene}
-                        >
-                            <Tab.Screen options={{ tabBarIcon: ({ focused }) => HomeIcon(focused) }}
-                                        name={"Home"} component={Home} />
-                            <Tab.Screen options={{ tabBarIcon: ({ focused }) => SearchIcon(focused) }}
-                                        name={"Search"} component={Search} />
-                            <Tab.Screen options={{ tabBarIcon: ({ focused }) => SettingsIcon(focused) }}
-                                        name={"Settings"} component={Settings} />
-                        </Tab.Navigator>
-                    </NavigationContainer>
-                </View>
+                    <View style={{
+                        ...style.App,
+                        display: global.showingAny() ? "none" : "flex"
+                    }}>
+                        <NavigationContainer ref={navigator}>
+                            <Tab.Navigator
+                                tabBar={props => (
+                                    <>
+                                        <MediaPlayer />
+                                        <BottomTabBar {...props} />
+                                    </>
+                                )}
+                                screenOptions={{
+                                    headerShown: false,
+                                    tabBarShowLabel: false,
+                                    tabBarStyle: style.App_TabBar,
+                                }}
+                                sceneContainerStyle={style.App_Scene}
+                            >
+                                <Tab.Screen options={{ tabBarIcon: ({ focused }) => HomeIcon(focused) }}
+                                            name={"Home"} component={Home} />
+                                <Tab.Screen options={{ tabBarIcon: ({ focused }) => SearchIcon(focused) }}
+                                            name={"Search"} component={Search} />
+                                <Tab.Screen options={{ tabBarIcon: ({ focused }) => SettingsIcon(focused) }}
+                                            name={"Settings"} component={Settings} />
+                            </Tab.Navigator>
+                        </NavigationContainer>
+                    </View>
+                </GestureHandlerRootView>
             </SafeAreaView>
         </>
     );
diff --git a/src/ui/Debug.tsx b/src/ui/Debug.tsx
index 15b9b8f..b43611e 100644
--- a/src/ui/Debug.tsx
+++ b/src/ui/Debug.tsx
@@ -1,13 +1,14 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 
 import { useNavigation } from "@react-navigation/native";
-import TrackPlayer, { Track, useActiveTrack, usePlaybackState } from "react-native-track-player";
+import TrackPlayer, { RepeatMode, useActiveTrack, usePlaybackState } from "react-native-track-player";
 
 import StyledText from "@components/StyledText";
 import StyledButton from "@components/StyledButton";
 
 import { useDebug } from "@backend/stores";
+import Player, { currentlyPlaying, useQueue } from "@backend/player";
 
 import { colors, value } from "@style/Laudiolin";
 
@@ -24,14 +25,12 @@ function Debug() {
 
     const [queueInfo, showQueueInfo] = useState(false);
     const [trackInfo, showTrackInfo] = useState(false);
+    const [newQueueInfo, setNewQueueInfo] = useState(false);
 
-    const [queue, setQueue] = useState<Track[]>([]);
+    const [repeatMode, setRepeatMode] = useState(RepeatMode.Off);
+    const [songIndex, setSongIndex] = useState<number | undefined>(0);
 
-    useEffect(() => {
-        if (queueInfo) {
-            TrackPlayer.getQueue().then(setQueue);
-        }
-    }, [playerState]);
+    const queue = useQueue();
 
     return (
         <View style={{ padding: value.padding, gap: 15 }}>
@@ -55,19 +54,51 @@ function Debug() {
             <StyledButton
                 text={"Show Queue Info"}
                 buttonStyle={color(queueInfo)}
-                onPress={() => {
-                    showQueueInfo(!queueInfo);
-                    TrackPlayer.getQueue().then(setQueue);
-                }}
+                onPress={() => showQueueInfo(!queueInfo)}
             />
 
             { queueInfo && (
                 <View style={{ gap: 10 }}>
-                    <StyledText text={`Songs in queue: ${queue.length}`} bold />
                     <StyledButton
                         text={"Clear Queue"}
                         onPress={() => TrackPlayer.removeUpcomingTracks()}
                     />
+                    <StyledButton
+                        text={`Current Song: ${songIndex}`}
+                        onPress={() => TrackPlayer.getActiveTrackIndex().then(setSongIndex)}
+                    />
+                    <StyledButton
+                        text={`Current Repeat: ${repeatMode}`}
+                        onPress={() => {
+                            Player.nextRepeatMode().then(setRepeatMode);
+                        }}
+                    />
+                </View>
+            ) }
+
+            <StyledButton
+                text={"Show New Queue Info"}
+                buttonStyle={color(newQueueInfo)}
+                onPress={() => setNewQueueInfo(!newQueueInfo)}
+            />
+
+            { newQueueInfo && (
+                <View style={{ gap: 10 }}>
+                    <StyledText text={`Songs in queue: ${queue.size()}`} bold />
+                    <StyledText text={`Next Song: ${queue.peek()?.title ?? "No song in queue"}`} />
+                    <StyledText text={`Currently playing song: ${currentlyPlaying?.title ?? "None"}`} />
+
+                    <StyledButton
+                        text={`Current Repeat: ${repeatMode}`}
+                        onPress={() => {
+                            Player.nextRepeatMode().then(setRepeatMode);
+                        }}
+                    />
+
+                    <StyledButton
+                        text={"Remove Element"}
+                        onPress={() => queue.dequeue()}
+                    />
                 </View>
             ) }
 
diff --git a/src/ui/NowPlaying.tsx b/src/ui/NowPlaying.tsx
index 4765dfe..bba1fe3 100644
--- a/src/ui/NowPlaying.tsx
+++ b/src/ui/NowPlaying.tsx
@@ -16,6 +16,8 @@ import TrackPlayer, {
     usePlaybackState,
     useProgress,
 } from "react-native-track-player";
+import { NavigationContainerRef } from "@react-navigation/core";
+import { GestureDetector, Gesture, Directions } from "react-native-gesture-handler";
 
 import ProgressBar from "@widgets/ProgressBar";
 import StyledText, { Size } from "@components/StyledText";
@@ -36,7 +38,7 @@ function RepeatIcon({ loop }: { loop: RepeatMode }) {
     }
 }
 
-function NowPlaying() {
+function NowPlaying({ navigation }: { navigation: NavigationContainerRef<any> }) {
     const global = useGlobal();
 
     const track = useActiveTrack();
@@ -49,82 +51,98 @@ function NowPlaying() {
         TrackPlayer.getRepeatMode().then(setRepeatMode);
     });
 
+    const goBack = () => global.setShowTrackPage(false);
+    const openQueue = () => {
+        navigation.navigate("Named List", {
+            title: "Queue", fetcher: "queue", render: "tracks"
+        });
+        global.setShowTrackPage(false);
+    };
+    const backGesture = Gesture.Fling()
+        .direction(Directions.DOWN)
+        .onEnd(goBack);
+    const queueGesture = Gesture.Fling()
+        .direction(Directions.UP)
+        .onEnd(openQueue);
+
     return (
-        <View style={style.NowPlaying}>
-            <View style={style.NowPlaying_Header}>
-                <TouchableOpacity onPress={() => global.setShowTrackPage(false)}>
-                    <AdIcon name={"left"} size={28} color={"white"} />
-                </TouchableOpacity>
-
-                { global.fromPlaylist && (
-                    <View style={style.NowPlaying_Source}>
-                        <StyledText uppercase text={"Playing from Playlist"}
+        <GestureDetector gesture={Gesture.Exclusive(queueGesture, backGesture)}>
+            <View style={style.NowPlaying}>
+                <View style={style.NowPlaying_Header}>
+                    <TouchableOpacity onPress={() => global.setShowTrackPage(false)}>
+                        <AdIcon name={"left"} size={28} color={"white"} />
+                    </TouchableOpacity>
+
+                    { global.fromPlaylist && (
+                        <View style={style.NowPlaying_Source}>
+                            <StyledText uppercase text={"Playing from Playlist"}
+                                        style={{ color: colors.gray }}
+                            />
+                            <StyledText bold text={global.fromPlaylist} />
+                        </View>
+                    ) }
+
+                    <TouchableOpacity onPress={() => null}>
+                        <EnIcon name={"dots-three-vertical"} size={24} color={"white"} />
+                        {/* TODO: Move favorite track into context menu. */}
+                    </TouchableOpacity>
+                </View>
+
+                <FastImage
+                    style={style.NowPlaying_Cover}
+                    source={{ uri: track?.artwork }}
+                    resizeMode={"contain"}
+                />
+
+                <View style={{ flexDirection: "column" }}>
+                    <View style={style.NowPlaying_Info}>
+                        <StyledText text={track?.title ?? "Not Playing"}
+                                    size={Size.Header} bold
+                                    lines={value.height > 700 ? 3 : 2}
+                        />
+
+                        <StyledText text={track?.artist ?? "---"}
                                     style={{ color: colors.gray }}
+                                    size={Size.Text} lines={1}
                         />
-                        <StyledText bold text={global.fromPlaylist} />
                     </View>
-                ) }
-
-                <TouchableOpacity onPress={() => null}>
-                    <EnIcon name={"dots-three-vertical"} size={24} color={"white"} />
-                    {/* TODO: Move favorite track into context menu. */}
-                </TouchableOpacity>
-            </View>
 
-            <FastImage
-                style={style.NowPlaying_Cover}
-                source={{ uri: track?.artwork }}
-                resizeMode={"contain"}
-            />
-
-            <View style={{ flexDirection: "column" }}>
-                <View style={style.NowPlaying_Info}>
-                    <StyledText text={track?.title ?? "Not Playing"}
-                                size={Size.Header} bold
-                                lines={value.height > 700 ? 3 : 2}
-                    />
-
-                    <StyledText text={track?.artist ?? "---"}
-                                style={{ color: colors.gray }}
-                                size={Size.Text} lines={1}
+                    <ProgressBar
+                        progress={progress.position}
+                        duration={progress.duration}
+                        style={{ paddingLeft: 10, paddingRight: 10, marginBottom: 15 }}
                     />
                 </View>
 
-                <ProgressBar
-                    progress={progress.position}
-                    duration={progress.duration}
-                    style={{ paddingLeft: 10, paddingRight: 10, marginBottom: 15 }}
-                />
-            </View>
-
-            <View style={style.NowPlaying_Controls}>
-                <TouchableOpacity onPress={() => Player.shuffle()}>
-                    <FaIcon name={"shuffle"} color={"white"} size={28} />
-                </TouchableOpacity>
-
-                <TouchableOpacity onPress={() => TrackPlayer.skipToPrevious()}>
-                    <IoIcon name={"play-skip-back"} color={"white"} size={28} />
-                </TouchableOpacity>
-
-                <TouchableOpacity onPress={async () => {
-                    if (state == State.Paused) {
-                        await TrackPlayer.play();
-                    } else if (state == State.Playing) {
-                        await TrackPlayer.pause();
-                    }
-                }}>
-                    <MdIcon name={state == State.Playing ? "pause" : "play-arrow"} color={"white"} size={32} />
-                </TouchableOpacity>
-
-                <TouchableOpacity onPress={() => TrackPlayer.skipToNext()}>
-                    <IoIcon name={"play-skip-forward"} color={"white"} size={28} />
-                </TouchableOpacity>
-
-                <TouchableOpacity onPress={() => Player.nextRepeatMode().then(setRepeatMode)}>
-                    <RepeatIcon loop={repeatMode} />
-                </TouchableOpacity>
+                <View style={style.NowPlaying_Controls}>
+                    <TouchableOpacity onPress={() => Player.shuffle()}>
+                        <FaIcon name={"shuffle"} color={"white"} size={28} />
+                    </TouchableOpacity>
+
+                    <TouchableOpacity onPress={() => Player.skipToPrevious()}>
+                        <IoIcon name={"play-skip-back"} color={"white"} size={28} />
+                    </TouchableOpacity>
+
+                    <TouchableOpacity onPress={async () => {
+                        if (state == State.Paused) {
+                            await TrackPlayer.play();
+                        } else if (state == State.Playing) {
+                            await TrackPlayer.pause();
+                        }
+                    }}>
+                        <MdIcon name={state == State.Playing ? "pause" : "play-arrow"} color={"white"} size={32} />
+                    </TouchableOpacity>
+
+                    <TouchableOpacity onPress={() => Player.skipToNext()}>
+                        <IoIcon name={"play-skip-forward"} color={"white"} size={28} />
+                    </TouchableOpacity>
+
+                    <TouchableOpacity onPress={() => Player.nextRepeatMode().then(setRepeatMode)}>
+                        <RepeatIcon loop={repeatMode} />
+                    </TouchableOpacity>
+                </View>
             </View>
-        </View>
+        </GestureDetector>
     );
 }
 
@@ -171,7 +189,8 @@ const style = StyleSheet.create({
         bottom: 10,
         flexDirection: "row",
         alignItems: "center",
-        justifyContent: "space-between",
+        gap: 30,
+        alignSelf: "center",
         paddingTop: 30,
         paddingLeft: 25,
         paddingRight: 25
diff --git a/src/ui/Playlist.tsx b/src/ui/Playlist.tsx
index 5e9b270..b6c1a31 100644
--- a/src/ui/Playlist.tsx
+++ b/src/ui/Playlist.tsx
@@ -109,10 +109,7 @@ function Playlist(props: IProps) {
                             style={{ marginRight: 5 }}
                         />}
                         buttonStyle={{ backgroundColor: colors.contrast }}
-                        onPress={() => Player.queue({
-                            tracks: playlist?.tracks,
-                            clear: true, start: true,
-                        })}
+                        onPress={() => Player.play(playlist?.tracks, { clear: true })}
                     />
 
                     <StyledButton
@@ -123,10 +120,8 @@ function Playlist(props: IProps) {
                             style={{ marginRight: 5 }}
                         />}
                         buttonStyle={{ backgroundColor: colors.accent }}
-                        onPress={() => Player.queue({
-                            playlist,
-                            tracks: playlist?.tracks,
-                            clear: true, start: true, shuffle: true
+                        onPress={() => Player.play(playlist?.tracks, {
+                            playlist, clear: true, shuffle: true
                         })}
                     />
                 </View>
diff --git a/src/ui/components/NamedList.tsx b/src/ui/components/NamedList.tsx
index de469d3..fcefcdf 100644
--- a/src/ui/components/NamedList.tsx
+++ b/src/ui/components/NamedList.tsx
@@ -10,6 +10,7 @@ import BackButton from "@widgets/BackButton";
 import PlaylistStripe from "@widgets/PlaylistStripe";
 
 import { TrackInfo } from "@backend/types";
+import { useQueue } from "@backend/player";
 
 import { value } from "@style/Laudiolin";
 
@@ -18,11 +19,17 @@ const renderers: { [key: string]: (data: any) => ReactElement } = {
     playlists: (playlist: any) => <PlaylistStripe playlist={playlist} />
 };
 
+const fetchers: { [key: string]: () => any } = {
+    queue: useQueue
+};
+
 interface RouteParams<T> {
     title: string;
-
-    items: T[];
     render: string;
+    renderLimit?: number | undefined;
+
+    items?: T[];
+    fetcher?: string;
 }
 
 interface IProps {
@@ -32,10 +39,18 @@ interface IProps {
 
 function NamedList<T>(props: IProps) {
     const { route, navigation } = props;
-    const { title, items, render } = route.params as RouteParams<T>;
+    const {
+        title, render, items: providedItems,
+        fetcher, renderLimit
+    } = route.params as RouteParams<T>;
 
     const renderer = renderers[render] as (item: T) => ReactElement;
 
+    let items = fetcher ? fetchers[fetcher]() : providedItems;
+    if ("values" in items) {
+        items = items.values();
+    }
+
     return (
         <View style={style.NamedList}>
             <View style={style.NamedList_Header}>
@@ -45,7 +60,7 @@ function NamedList<T>(props: IProps) {
 
             <FlatList
                 data={items}
-                initialNumToRender={5}
+                initialNumToRender={renderLimit}
                 contentContainerStyle={style.NamedList_List}
                 renderItem={({ item }) => renderer(item)}
             />
diff --git a/src/ui/widgets/MediaPlayer.tsx b/src/ui/widgets/MediaPlayer.tsx
index 687fa2f..eb9a880 100644
--- a/src/ui/widgets/MediaPlayer.tsx
+++ b/src/ui/widgets/MediaPlayer.tsx
@@ -8,6 +8,7 @@ import TrackPlayer, { State, useActiveTrack, usePlaybackState } from "react-nati
 
 import StyledText, { Size } from "@components/StyledText";
 
+import Player from "@backend/player";
 import { artist } from "@backend/search";
 import { useGlobal } from "@backend/stores";
 
@@ -47,7 +48,7 @@ function MediaPlayer() {
                             <MdIcon name={state == State.Playing ? "pause" : "play-arrow"} size={32} color={"white"} />
                         </TouchableOpacity>
 
-                        <TouchableOpacity onPress={() => TrackPlayer.skipToNext()}>
+                        <TouchableOpacity onPress={() => Player.skipToNext()}>
                             <McIcon name={"skip-next"} size={32} color={"white"} />
                         </TouchableOpacity>
                     </View>
diff --git a/src/ui/widgets/Track.tsx b/src/ui/widgets/Track.tsx
index 94b9b7a..aa9952f 100644
--- a/src/ui/widgets/Track.tsx
+++ b/src/ui/widgets/Track.tsx
@@ -45,8 +45,8 @@ function Track(props: IProps) {
                 />
 
                 <View style={style.Track_Info}>
-                    <StyledText style={style.Track_Title} text={data.title}
-                                ticker={data.title.length > 25} />
+                    <StyledText style={style.Track_Title} text={data.title ?? ""}
+                                ticker={(data.title ?? "").length > 25} />
                     <StyledText text={artist(data)} size={Size.Footnote} />
                 </View>
             </View>