diff --git a/components/Album/component.tsx b/components/Album/component.tsx
index 32a1a3a8..ebb61065 100644
--- a/components/Album/component.tsx
+++ b/components/Album/component.tsx
@@ -13,6 +13,7 @@ import { useAlbumTracks } from "../../api/queries/album";
 import { usePlayerContext } from "../../player/provider";
 import { mapDtoToTrack } from "../../helpers/mappings";
 import RunTimeTicks from "../Global/runtimeticks";
+import Track from "../Global/track";
 
 interface AlbumProps {
     album: BaseItemDto,
@@ -53,34 +54,12 @@ export default function Album(props: AlbumProps): React.JSX.Element {
                     numColumns={1}
                     renderItem={({ item: track, index }) => {
 
-                        let isPlaying = nowPlaying?.ItemId === track.Id;
-
                         return (
-                            <View>
-                                <Separator />
-                                <XStack 
-                                    flex={1}
-                                    onPress={async (track) => {
-                                        await resetQueue(false)
-                                        await addToQueue(tracks!.map((track) => mapDtoToTrack(apiClient!, sessionId, track)));
-                                        play(index);
-                                    }}
-                                    paddingVertical={"$2"}
-                                    paddingHorizontal={"$1"}
-                                >
-                                    <XStack justifyContent="center" flex={1}>
-                                        <Text>{ track.IndexNumber?.toString() ?? "" }</Text>
-                                    </XStack>
-
-                                    <XStack alignContent="flex-start" flex={8}>
-                                        <Text>{ track.Name ?? "Untitled Track" }</Text>
-                                    </XStack>
-
-                                    <XStack alignContent="flex-end" flex={1}>
-                                        <RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>
-                                    </XStack>
-                                </XStack>
-                            </View>
+                            <Track
+                                track={track}
+                                tracklist={tracks!}
+                                index={index}
+                            />
                         )
 
                 }}/>
diff --git a/components/Global/track.tsx b/components/Global/track.tsx
new file mode 100644
index 00000000..906595f8
--- /dev/null
+++ b/components/Global/track.tsx
@@ -0,0 +1,65 @@
+import { usePlayerContext } from "@/player/provider";
+import React from "react";
+import { Separator, useTheme, View, XStack } from "tamagui";
+import { Text } from "./text";
+import RunTimeTicks from "./runtimeticks";
+import { useApiClientContext } from "../jellyfin-api-provider";
+import { mapDtoToTrack } from "@/helpers/mappings";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Colors } from "@/enums/colors";
+
+interface TrackProps {
+    track: BaseItemDto;
+    tracklist: BaseItemDto[];
+    index: number;
+    showArtwork?: boolean | undefined;
+}
+
+export default function Track({
+    track,
+    tracklist,
+    index,
+    showArtwork
+} : {
+    track: BaseItemDto,
+    tracklist: BaseItemDto[],
+    index: number,
+    showArtwork?: boolean | undefined
+}) : React.JSX.Element {
+
+    const { apiClient, sessionId } = useApiClientContext();
+
+    const { nowPlaying, resetQueue, addToQueue, play } = usePlayerContext();
+
+    const theme = useTheme();
+
+    let isPlaying = nowPlaying?.ItemId === track.Id
+
+    return (
+        <View>
+            <Separator />
+            <XStack 
+                flex={1}
+                onPress={async () => {
+                    await resetQueue(false)
+                    await addToQueue(tracklist.map((track) => mapDtoToTrack(apiClient!, sessionId, track)));
+                    play(index);
+                }}
+                paddingVertical={"$2"}
+                paddingHorizontal={"$1"}
+            >
+                <XStack justifyContent="center" flex={1}>
+                    <Text>{ track.IndexNumber?.toString() ?? "" }</Text>
+                </XStack>
+
+                <XStack alignContent="flex-start" flex={8}>
+                    <Text color={isPlaying ? theme.accentColor : theme.white12}>{ track.Name ?? "Untitled Track" }</Text>
+                </XStack>
+
+                <XStack alignContent="flex-end" flex={1}>
+                    <RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>
+                </XStack>
+            </XStack>
+        </View>
+    )
+}
\ No newline at end of file