diff --git a/app/(auth)/(tabs)/_layout.tsx b/app/(auth)/(tabs)/_layout.tsx
index 85846a7b..333cc018 100644
--- a/app/(auth)/(tabs)/_layout.tsx
+++ b/app/(auth)/(tabs)/_layout.tsx
@@ -70,6 +70,19 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="library"
+        options={{
+          headerShown: false,
+          title: "Library",
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon
+              name={focused ? "apps" : "apps-outline"}
+              color={color}
+            />
+          ),
+        }}
+      />
     </Tabs>
   );
 }
diff --git a/app/(auth)/(tabs)/library/_layout.tsx b/app/(auth)/(tabs)/library/_layout.tsx
new file mode 100644
index 00000000..505bbe66
--- /dev/null
+++ b/app/(auth)/(tabs)/library/_layout.tsx
@@ -0,0 +1,30 @@
+import { Stack, useRouter } from "expo-router";
+import { Platform } from "react-native";
+
+export default function IndexLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Library",
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
+        }}
+      />
+      <Stack.Screen
+        name="collections/[collectionId]"
+        options={{
+          title: "",
+          headerShown: true,
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
+        }}
+      />
+    </Stack>
+  );
+}
diff --git a/app/(auth)/(tabs)/library/collections/[collectionId].tsx b/app/(auth)/(tabs)/library/collections/[collectionId].tsx
new file mode 100644
index 00000000..0f345649
--- /dev/null
+++ b/app/(auth)/(tabs)/library/collections/[collectionId].tsx
@@ -0,0 +1,305 @@
+import * as DropdownMenu from "zeego/dropdown-menu";
+import ArtistPoster from "@/components/ArtistPoster";
+import { ColumnItem } from "@/components/common/ColumnItem";
+import { Text } from "@/components/common/Text";
+import { ItemCardText } from "@/components/ItemCardText";
+import { Loading } from "@/components/Loading";
+import MoviePoster from "@/components/MoviePoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BaseItemDto,
+  BaseItemDtoQueryResult,
+  BaseItemKind,
+  ItemSortBy,
+  NameGuidPair,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { getFilterApi, getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import {
+  QueryFilters,
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  Stack,
+  router,
+  useLocalSearchParams,
+  useNavigation,
+} from "expo-router";
+import { useAtom } from "jotai";
+import React, {
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  ActivityIndicator,
+  Platform,
+  RefreshControl,
+  ScrollView,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";
+import {
+  genreFilterAtom,
+  yearFilterAtom,
+  sortByAtom,
+  tagsFilterAtom,
+} from "@/utils/atoms/filters";
+import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
+import { FilterButton } from "@/components/filters/FilterButton";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+
+const page: React.FC = () => {
+  const searchParams = useLocalSearchParams();
+  const navigation = useNavigation();
+  const { collectionId } = searchParams as { collectionId: string };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
+  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
+  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+
+  const { data: collection } = useQuery({
+    queryKey: ["collection", collectionId],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        ids: [collectionId],
+      });
+      const data = response.data.Items?.[0];
+      return data;
+    },
+    enabled: !!api && !!user?.Id && !!collectionId,
+    staleTime: 0,
+  });
+
+  const fetchItems = useCallback(
+    async ({
+      pageParam,
+    }: {
+      pageParam: number;
+    }): Promise<BaseItemDtoQueryResult | null> => {
+      if (!api || !collection) return null;
+
+      const sortBy: ItemSortBy[] = [];
+      const includeItemTypes: BaseItemKind[] = [];
+
+      switch (collection?.CollectionType) {
+        case "movies":
+          sortBy.push("SortName", "ProductionYear");
+          break;
+        case "boxsets":
+          sortBy.push("IsFolder", "SortName");
+          break;
+        default:
+          sortBy.push("SortName");
+          break;
+      }
+
+      switch (collection?.CollectionType) {
+        case "movies":
+          includeItemTypes.push("Movie");
+          break;
+        case "boxsets":
+          includeItemTypes.push("BoxSet");
+          break;
+        case "tvshows":
+          includeItemTypes.push("Series");
+          break;
+        case "music":
+          includeItemTypes.push("MusicAlbum");
+          break;
+        default:
+          break;
+      }
+
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        parentId: collectionId,
+        limit: 50,
+        startIndex: pageParam,
+        sortBy,
+        sortOrder: ["Ascending"],
+        includeItemTypes,
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        recursive: true,
+        imageTypeLimit: 1,
+        fields: ["PrimaryImageAspectRatio", "SortName"],
+        genres: selectedGenres,
+        tags: selectedTags,
+        years: selectedYears.map((year) => parseInt(year)),
+      });
+
+      return response.data || null;
+    },
+    [
+      api,
+      user?.Id,
+      collectionId,
+      collection?.CollectionType,
+      selectedGenres,
+      selectedYears,
+      selectedTags,
+    ],
+  );
+
+  const {
+    status,
+    data,
+    error,
+    isFetching,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasPreviousPage,
+  } = useInfiniteQuery({
+    queryKey: [
+      "library-items",
+      collection,
+      selectedGenres,
+      selectedYears,
+      selectedTags,
+      sortBy,
+    ],
+    queryFn: fetchItems,
+    getNextPageParam: (lastPage, pages) => {
+      const totalItems = lastPage?.TotalRecordCount || 0;
+      if ((lastPage?.Items?.length || 0) < totalItems) {
+        return lastPage?.Items?.length;
+      } else {
+        return undefined;
+      }
+    },
+    initialPageParam: 0,
+    enabled: !!api && !!user?.Id && !!collection,
+  });
+
+  const type = useMemo(() => {
+    return data?.pages.flatMap((page) => page?.Items)[0]?.Type || null;
+  }, [data]);
+
+  if (!collection || !collection.CollectionType) return null;
+
+  return (
+    <>
+      <FlashList
+        refreshing={isFetching}
+        data={data?.pages.flatMap((page) => page?.Items) || []}
+        horizontal={false}
+        contentInsetAdjustmentBehavior="automatic"
+        contentContainerStyle={{
+          paddingTop: 17,
+          paddingHorizontal: 10,
+          paddingBottom: 150,
+        }}
+        onEndReached={fetchNextPage}
+        onEndReachedThreshold={0.5}
+        renderItem={({ item, index }) =>
+          item ? (
+            <ColumnItem index={index} numColumns={3} style={{}}>
+              <TouchableItemRouter
+                style={{
+                  width: "100%",
+                  padding: 4,
+                }}
+                item={item}
+              >
+                <MoviePoster item={item} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            </ColumnItem>
+          ) : null
+        }
+        numColumns={3}
+        estimatedItemSize={200}
+        ListHeaderComponent={
+          <View className="mb-4">
+            <View className="flex flex-row space-x-1">
+              <ResetFiltersButton />
+              <FilterButton
+                collectionId={collectionId}
+                queryKey="genreFilter"
+                queryFn={async () => {
+                  if (!api) return null;
+                  const response = await getFilterApi(
+                    api,
+                  ).getQueryFiltersLegacy({
+                    userId: user?.Id,
+                    includeItemTypes: type ? [type] : [],
+                    parentId: collectionId,
+                  });
+                  return response.data.Genres || [];
+                }}
+                set={setSelectedGenres}
+                values={selectedGenres}
+                title="Genres"
+              />
+              <FilterButton
+                collectionId={collectionId}
+                queryKey="tagsFilter"
+                queryFn={async () => {
+                  if (!api) return null;
+                  const response = await getFilterApi(
+                    api,
+                  ).getQueryFiltersLegacy({
+                    userId: user?.Id,
+                    includeItemTypes: type ? [type] : [],
+                    parentId: collectionId,
+                  });
+                  return response.data.Tags || [];
+                }}
+                set={setSelectedTags}
+                values={selectedTags}
+                title="Tags"
+              />
+              <FilterButton
+                collectionId={collectionId}
+                queryKey="yearFilter"
+                queryFn={async () => {
+                  if (!api) return null;
+                  const response = await getFilterApi(
+                    api,
+                  ).getQueryFiltersLegacy({
+                    userId: user?.Id,
+                    includeItemTypes: type ? [type] : [],
+                    parentId: collectionId,
+                  });
+                  return (
+                    response.data.Years?.sort((a, b) => b - a).map((y) =>
+                      y.toString(),
+                    ) || []
+                  );
+                }}
+                set={setSelectedYears}
+                values={selectedYears}
+                title="Years"
+              />
+            </View>
+            {!type && isFetching && (
+              <ActivityIndicator
+                style={{
+                  marginTop: 300,
+                }}
+                size={"small"}
+                color={"white"}
+              />
+            )}
+          </View>
+        }
+      />
+    </>
+  );
+};
+
+export default page;
diff --git a/app/(auth)/(tabs)/library/index.tsx b/app/(auth)/(tabs)/library/index.tsx
new file mode 100644
index 00000000..275b1b61
--- /dev/null
+++ b/app/(auth)/(tabs)/library/index.tsx
@@ -0,0 +1,119 @@
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+import { useAtom } from "jotai";
+import { useCallback, useMemo, useState } from "react";
+import {
+  ActivityIndicator,
+  RefreshControl,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useSettings } from "@/utils/atoms/settings";
+import { FlashList } from "@shopify/flash-list";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { Image } from "expo-image";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function index() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const [loading, setLoading] = useState(false);
+  const [settings, _] = useSettings();
+
+  const { data, isLoading: isLoading } = useQuery({
+    queryKey: ["collections", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id) {
+        return [];
+      }
+
+      const data = (
+        await getItemsApi(api).getItems({
+          userId: user.Id,
+          sortBy: ["SortName", "DateCreated"],
+        })
+      ).data;
+
+      return data.Items || [];
+    },
+    enabled: !!api && !!user?.Id,
+    staleTime: 60 * 1000,
+  });
+
+  if (isLoading)
+    return (
+      <View className="justify-center items-center h-full">
+        <ActivityIndicator />
+      </View>
+    );
+
+  return (
+    <FlashList
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={{
+        paddingTop: 17,
+        paddingHorizontal: 17,
+        paddingBottom: 150,
+      }}
+      data={data}
+      renderItem={({ item }) => <CollectionCard collection={item} />}
+      keyExtractor={(item) => item.Id || ""}
+      ItemSeparatorComponent={() => <View className="h-4" />}
+      estimatedItemSize={200}
+    />
+  );
+}
+
+interface Props {
+  collection: BaseItemDto;
+}
+
+const CollectionCard: React.FC<Props> = ({ collection }) => {
+  const router = useRouter();
+
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item: collection,
+      }),
+    [collection],
+  );
+
+  if (!url) return null;
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        router.push(`/library/collections/${collection.Id}`);
+      }}
+    >
+      <View className="flex items-center justify-center rounded-xl w-full aspect-video relative border border-neutral-900">
+        <Image
+          source={{ uri: url }}
+          style={{
+            width: "100%",
+            height: "100%",
+            borderRadius: 8,
+            position: "absolute",
+            top: 0,
+            left: 0,
+          }}
+        />
+        <Text className="font-bold text-2xl">{collection.Name}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
diff --git a/components/filters/FilterButton.tsx b/components/filters/FilterButton.tsx
new file mode 100644
index 00000000..7cb65c9a
--- /dev/null
+++ b/components/filters/FilterButton.tsx
@@ -0,0 +1,85 @@
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { Ionicons } from "@expo/vector-icons";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+
+interface Props extends ViewProps {
+  collectionId: string;
+  queryFn: (params: any) => Promise<any>;
+  queryKey: string;
+  set: (value: string[]) => void;
+  values: string[];
+  title: string;
+}
+
+export const FilterButton: React.FC<Props> = ({
+  collectionId,
+  queryFn,
+  queryKey,
+  set,
+  values,
+  title,
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const { data: filters } = useQuery<string[]>({
+    queryKey: [queryKey, collectionId],
+    queryFn,
+    staleTime: 0,
+  });
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <TouchableOpacity>
+          <View
+            className={`
+            px-3 py-2 rounded-full flex flex-row items-center space-x-2
+            ${values.length > 0 ? "bg-purple-600" : "bg-neutral-900"}
+            `}
+            {...props}
+          >
+            <Text>{title}</Text>
+            <Ionicons
+              name="filter"
+              size={16}
+              color="white"
+              style={{ opacity: 0.5 }}
+            />
+          </View>
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        loop={true}
+        side="bottom"
+        align="start"
+        alignOffset={0}
+        avoidCollisions={true}
+        collisionPadding={8}
+        sideOffset={8}
+      >
+        {filters?.map((g) => (
+          <DropdownMenu.CheckboxItem
+            value={values.includes(g)}
+            onValueChange={(next, previous) => {
+              if (next === "on") {
+                set([...values, g]);
+              } else {
+                set(values.filter((v) => v !== g));
+              }
+            }}
+            key={g}
+            textValue={g}
+          >
+            <DropdownMenu.ItemIndicator />
+          </DropdownMenu.CheckboxItem>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};
diff --git a/components/filters/ResetFiltersButton.tsx b/components/filters/ResetFiltersButton.tsx
new file mode 100644
index 00000000..14717d54
--- /dev/null
+++ b/components/filters/ResetFiltersButton.tsx
@@ -0,0 +1,36 @@
+import {
+  genreFilterAtom,
+  tagsFilterAtom,
+  yearFilterAtom,
+} from "@/utils/atoms/filters";
+import { Ionicons } from "@expo/vector-icons";
+import { useAtom } from "jotai";
+import { TouchableOpacity } from "react-native";
+
+export const ResetFiltersButton: React.FC = ({ ...props }) => {
+  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
+  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
+  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
+
+  if (
+    selectedGenres.length === 0 &&
+    selectedTags.length === 0 &&
+    selectedYears.length === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        setSelectedGenres([]);
+        setSelectedTags([]);
+        setSelectedYears([]);
+      }}
+      className="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center"
+      {...props}
+    >
+      <Ionicons name="close" size={20} color="white" />
+    </TouchableOpacity>
+  );
+};
diff --git a/utils/atoms/filters.ts b/utils/atoms/filters.ts
new file mode 100644
index 00000000..f02a7a11
--- /dev/null
+++ b/utils/atoms/filters.ts
@@ -0,0 +1,7 @@
+import { NameGuidPair } from "@jellyfin/sdk/lib/generated-client/models";
+import { atom, useAtom } from "jotai";
+
+export const genreFilterAtom = atom<string[]>([]);
+export const tagsFilterAtom = atom<string[]>([]);
+export const yearFilterAtom = atom<string[]>([]);
+export const sortByAtom = atom<string>("title");