diff --git a/web/public/favicon.ico b/web/public/favicon.ico
new file mode 100644
index 000000000..430ab1a1a
Binary files /dev/null and b/web/public/favicon.ico differ
diff --git a/web/src/app/loading.tsx b/web/src/app/loading.tsx
index e1ddebd9f..863d6e748 100644
--- a/web/src/app/loading.tsx
+++ b/web/src/app/loading.tsx
@@ -1,4 +1,4 @@
-import { FilterListTableSkeleton } from "@/components/filterlist-table/skeleton";
+import { FilterListTableSkeleton } from "@/components/filterlist-table/table-skeleton";
 
 export default function Loading() {
   return (
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 721129fa6..c0f5a6cb8 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,18 +1,12 @@
 import { FilterListTable } from "@/components/filterlist-table";
-import { columns, FilterList } from "@/components/filterlist-table/columns";
-
-async function getInitialFilterLists(): Promise<FilterList[]> {
-  const response = await fetch("https://api.filterlists.com/lists", {
-    next: { revalidate: 86400 },
-  });
-  const lists = await response.json();
-
-  // TODO: add pagination support to API
-  return lists.slice(0, 20);
-}
+import { columns } from "@/components/filterlist-table/columns";
+import { getFilterLists } from "@/services/get-filterlists";
 
 export default async function Home() {
-  const initialData = await getInitialFilterLists();
+  const filterLists = await getFilterLists();
+
+  // TODO: add pagination support to API
+  const initialData = filterLists.slice(0, 20);
 
   return (
     <main className="pt-4 p-8 gap-16 sm:p-20 sm:pt-8">
diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.ts
similarity index 79%
rename from web/src/components/filterlist-table/columns.tsx
rename to web/src/components/filterlist-table/columns.ts
index 82a63b149..fa1c2bedc 100644
--- a/web/src/components/filterlist-table/columns.tsx
+++ b/web/src/components/filterlist-table/columns.ts
@@ -1,10 +1,6 @@
+import { FilterList } from "@/services/get-filterlists";
 import { createColumnHelper } from "@tanstack/react-table";
 
-export type FilterList = {
-  name: string;
-  description: string;
-};
-
 const columnHelper = createColumnHelper<FilterList>();
 
 export const columns = [
diff --git a/web/src/components/filterlist-table/index.tsx b/web/src/components/filterlist-table/index.tsx
index 64c6dc23a..d84da991b 100644
--- a/web/src/components/filterlist-table/index.tsx
+++ b/web/src/components/filterlist-table/index.tsx
@@ -16,10 +16,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FilterList } from "./columns";
 import { useEffect, useState } from "react";
 import { FilterListTablePagination } from "./pagination";
-import { FilterListTablePaginationSkeleton } from "./skeleton";
+import { FilterList, getFilterLists } from "@/services/get-filterlists";
+import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
 
 interface FilterListTableProps {
   columns: AccessorKeyColumnDef<FilterList, string>[];
@@ -36,8 +36,7 @@ export function FilterListTable({
   useEffect(() => {
     async function fetchAll() {
       try {
-        const response = await fetch("https://api.filterlists.com/lists");
-        const lists = await response.json();
+        const lists = await getFilterLists();
         setData(lists);
       } finally {
         setLoading(false);
diff --git a/web/src/components/filterlist-table/pagination-skeleton.tsx b/web/src/components/filterlist-table/pagination-skeleton.tsx
new file mode 100644
index 000000000..c32795ac9
--- /dev/null
+++ b/web/src/components/filterlist-table/pagination-skeleton.tsx
@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function FilterListTablePaginationSkeleton() {
+  return (
+    <div className="flex items-center justify-between gap-2 mt-2">
+      <Skeleton className="h-8 w-20" />
+      <Skeleton className="h-6 w-24" />
+      <Skeleton className="h-8 w-20" />
+    </div>
+  );
+}
diff --git a/web/src/components/filterlist-table/pagination.tsx b/web/src/components/filterlist-table/pagination.tsx
index b8e70aa25..67ec99c5f 100644
--- a/web/src/components/filterlist-table/pagination.tsx
+++ b/web/src/components/filterlist-table/pagination.tsx
@@ -1,13 +1,15 @@
 import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Table } from "@tanstack/react-table";
-import { FilterList } from "./columns";
+import { FilterList } from "@/services/get-filterlists";
 
-interface PaginationProps {
+interface FilterListTablePaginationProps {
   table: Table<FilterList>;
 }
 
-export function FilterListTablePagination({ table }: PaginationProps) {
+export function FilterListTablePagination({
+  table,
+}: FilterListTablePaginationProps) {
   return (
     <div className="flex items-center justify-between gap-2">
       <Button
diff --git a/web/src/components/filterlist-table/skeleton.tsx b/web/src/components/filterlist-table/table-skeleton.tsx
similarity index 75%
rename from web/src/components/filterlist-table/skeleton.tsx
rename to web/src/components/filterlist-table/table-skeleton.tsx
index 90f473715..eb6b3edba 100644
--- a/web/src/components/filterlist-table/skeleton.tsx
+++ b/web/src/components/filterlist-table/table-skeleton.tsx
@@ -1,4 +1,5 @@
 import { Skeleton } from "@/components/ui/skeleton";
+import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
 
 export function FilterListTableSkeleton() {
   return (
@@ -27,13 +28,3 @@ export function FilterListTableSkeleton() {
     </div>
   );
 }
-
-export function FilterListTablePaginationSkeleton() {
-  return (
-    <div className="flex items-center justify-between gap-2 mt-2">
-      <Skeleton className="h-8 w-20" />
-      <Skeleton className="h-6 w-24" />
-      <Skeleton className="h-8 w-20" />
-    </div>
-  );
-}
diff --git a/web/src/components/header/index.tsx b/web/src/components/header/index.tsx
index 4e8032d43..c9e8d4041 100644
--- a/web/src/components/header/index.tsx
+++ b/web/src/components/header/index.tsx
@@ -1,5 +1,5 @@
 import { ThemeImage } from "@/components/theme-image";
-import { ThemeToggle } from "../theme-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
 import Link from "next/link";
 import LogoLight from "./logo-filterlists-light.png";
 import logoDark from "./logo-filterlists-dark.png";
diff --git a/web/src/components/theme-image.tsx b/web/src/components/theme-image.tsx
index 7a7c8f99e..8c818cd7b 100644
--- a/web/src/components/theme-image.tsx
+++ b/web/src/components/theme-image.tsx
@@ -4,12 +4,12 @@ import { useTheme } from "next-themes";
 import Image, { ImageProps, StaticImageData } from "next/image";
 import { useEffect, useState } from "react";
 
-type Props = Omit<ImageProps, "src" | "loading"> & {
+type ThemeImageProps = Omit<ImageProps, "src" | "loading"> & {
   srcLight: string | StaticImageData;
   srcDark: string | StaticImageData;
 };
 
-export const ThemeImage = (props: Props) => {
+export const ThemeImage = (props: ThemeImageProps) => {
   const { srcLight, srcDark, alt, priority, ...rest } = props;
   const { resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
diff --git a/web/src/services/constants.ts b/web/src/services/constants.ts
new file mode 100644
index 000000000..e95c8343f
--- /dev/null
+++ b/web/src/services/constants.ts
@@ -0,0 +1 @@
+export const API_BASE_URL = "https://api.filterlists.com";
diff --git a/web/src/services/get-filterlists.ts b/web/src/services/get-filterlists.ts
new file mode 100644
index 000000000..e5d1eeff6
--- /dev/null
+++ b/web/src/services/get-filterlists.ts
@@ -0,0 +1,25 @@
+import { API_BASE_URL } from "./constants";
+
+export type FilterList = {
+  id: number;
+  name: string;
+  description: string | null;
+  licenseId: number;
+  syntaxIds: number[];
+  languageIds: number[];
+  tagIds: number[];
+  primaryViewUrl: string | null;
+  maintainerIds: number[];
+};
+
+export async function getFilterLists(): Promise<FilterList[]> {
+  const response = await fetch(`${API_BASE_URL}/lists`, {
+    next: { revalidate: 86400 },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch filter lists: ${response.statusText}`);
+  }
+
+  return await response.json();
+}