diff --git a/backend/src/graphql/resolvers/artworkResolvers.ts b/backend/src/graphql/resolvers/artworkResolvers.ts
index e92e553..9e4a2b3 100644
--- a/backend/src/graphql/resolvers/artworkResolvers.ts
+++ b/backend/src/graphql/resolvers/artworkResolvers.ts
@@ -1,4 +1,4 @@
-import type { Db } from "mongodb";
+import type { Db, Filter } from "mongodb";
 
 type ArtworkSort =
   | "TITLE_ASC"
@@ -9,8 +9,222 @@ type ArtworkSort =
   | "YEAR_DESC"
   | null;
 
+type ArtworkPeriod =
+  | "BEFORE_1500"
+  | "YEARS_1500_1799"
+  | "CENTURY_19"
+  | "CENTURY_20_PLUS"
+  | null;
+
+async function distinctArtworkValues(db: Db, field: "culture" | "period") {
+  const values = await db.collection("met_artworks").aggregate<{ name: string }>([
+    { $match: { [field]: { $type: "string" } } },
+    { $project: { name: { $trim: { input: `$${field}` } } } },
+    { $match: { name: { $regex: "\\S" } } },
+    { $group: { _id: "$name" } },
+    { $sort: { _id: 1 } },
+    { $project: { _id: 0, name: "$_id" } },
+  ]).toArray();
+
+  return values.map(({ name }) => name);
+}
+
+type ArtworkFacetFilters = {
+  search?: string | null;
+  artists?: string[] | null;
+  countries?: string[] | null;
+  cultures?: string[] | null;
+  artPeriods?: string[] | null;
+  period?: ArtworkPeriod;
+  dateFrom?: number | null;
+  dateTo?: number | null;
+};
+
+type ArtworkFacet = "artists" | "countries" | "cultures" | "artPeriods" | "time";
+
+function makeArtworkFilter(filters: ArtworkFacetFilters, omit?: ArtworkFacet): Filter {
+  const searchTerm = filters.search?.trim() ?? "";
+  const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const parts: Filter[] = [];
+
+  if (searchTerm) {
+    parts.push({
+      $or: [
+        { title: { $regex: escapedSearchTerm, $options: "i" } },
+        { artist_display: { $regex: escapedSearchTerm, $options: "i" } },
+      ],
+    });
+  }
+
+  if (omit !== "artists" && filters.artists?.length) {
+    parts.push({
+      $expr: {
+        $in: [
+          { $trim: { input: { $ifNull: ["$artist_display", ""] } } },
+          filters.artists,
+        ],
+      },
+    });
+  }
+
+  const addNormalizedFilter = (
+    facet: Exclude<ArtworkFacet, "artists" | "time">,
+    field: "country" | "culture" | "period",
+    values?: string[] | null,
+  ) => {
+    if (omit === facet || !values?.length) return;
+    parts.push({
+      $expr: {
+        $in: [
+          { $trim: { input: { $ifNull: [`$${field}`, ""] } } },
+          values,
+        ],
+      },
+    });
+  };
+
+  addNormalizedFilter("countries", "country", filters.countries);
+  addNormalizedFilter("cultures", "culture", filters.cultures);
+  addNormalizedFilter("artPeriods", "period", filters.artPeriods);
+
+  if (omit !== "time" && filters.period) {
+    switch (filters.period) {
+      case "BEFORE_1500":
+        parts.push({ date_start: { $lte: 1499 } });
+        break;
+      case "YEARS_1500_1799":
+        parts.push({ $expr: { $and: [
+          { $isNumber: "$date_start" },
+          { $lte: ["$date_start", 1799] },
+          { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1500] },
+        ] } });
+        break;
+      case "CENTURY_19":
+        parts.push({ $expr: { $and: [
+          { $isNumber: "$date_start" },
+          { $lte: ["$date_start", 1899] },
+          { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1800] },
+        ] } });
+        break;
+      case "CENTURY_20_PLUS":
+        parts.push({ $expr: { $and: [
+          { $isNumber: "$date_start" },
+          { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1900] },
+        ] } });
+        break;
+    }
+  }
+
+  if (omit !== "time" && (typeof filters.dateFrom === "number" || typeof filters.dateTo === "number")) {
+    parts.push({ $expr: { $and: [
+      { $isNumber: "$date_start" },
+      ...(typeof filters.dateTo === "number" ? [{ $lte: ["$date_start", filters.dateTo] }] : []),
+      ...(typeof filters.dateFrom === "number"
+        ? [{ $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, filters.dateFrom] }]
+        : []),
+    ] } });
+  }
+
+  return parts.length ? { $and: parts } : {};
+}
+
+async function countFacetOptions(
+  db: Db,
+  field: "artist_display" | "country" | "culture" | "period",
+  filter: Filter,
+  search = "",
+) {
+  const escapedSearch = search.trim().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const rows = await db.collection("met_artworks").aggregate<{ value: string; count: number }>([
+    { $match: filter },
+    { $match: { [field]: { $type: "string" } } },
+    { $project: { value: { $trim: { input: `$${field}` } } } },
+    { $match: {
+      value: { $regex: escapedSearch || "\\S", $options: "i" },
+    } },
+    { $group: { _id: "$value", count: { $sum: 1 } } },
+    { $sort: { _id: 1 } },
+    { $project: { _id: 0, value: "$_id", count: 1 } },
+  ]).toArray();
+
+  return rows.filter(({ value }) => value.trim() !== "");
+}
+
 export function createArtworkResolvers(db: Db) {
   return {
+    artworkFilterOptions: async (
+      _: unknown,
+      {
+        search,
+        artistSearch,
+        artists,
+        countries,
+        cultures,
+        artPeriods,
+        period,
+        dateFrom,
+        dateTo,
+      }: ArtworkFacetFilters & { artistSearch?: string | null },
+    ) => {
+      const filters = { search, artists, countries, cultures, artPeriods, period, dateFrom, dateTo };
+      const [artistOptions, countryOptions, cultureOptions, artPeriodOptions] = await Promise.all([
+        countFacetOptions(db, "artist_display", makeArtworkFilter(filters, "artists"), artistSearch ?? ""),
+        countFacetOptions(db, "country", makeArtworkFilter(filters, "countries")),
+        countFacetOptions(db, "culture", makeArtworkFilter(filters, "cultures")),
+        countFacetOptions(db, "period", makeArtworkFilter(filters, "artPeriods")),
+      ]);
+
+      const timeFilter = makeArtworkFilter(filters, "time");
+      const periodBuckets: [string, Filter][] = [
+        ["BEFORE_1500", { date_start: { $lte: 1499 } }],
+        ["YEARS_1500_1799", { $expr: { $and: [
+          { $isNumber: "$date_start" },
+          { $lte: ["$date_start", 1799] },
+          { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1500] },
+        ] } }],
+        ["CENTURY_19", { $expr: { $and: [
+          { $isNumber: "$date_start" },
+          { $lte: ["$date_start", 1899] },
+          { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1800] },
+        ] } }],
+        ["CENTURY_20_PLUS", { $expr: { $and: [
+          { $isNumber: "$date_start" },
+          { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1900] },
+        ] } }],
+      ];
+      const periodOptions = await Promise.all(periodBuckets.map(async ([value, periodFilter]) => ({
+        value,
+        count: await db.collection("met_artworks").countDocuments(
+          { $and: [timeFilter, periodFilter] },
+          { collation: { locale: "en", strength: 1 } },
+        ),
+      })));
+
+      return {
+        artists: artistOptions,
+        countries: countryOptions,
+        cultures: cultureOptions,
+        artPeriods: artPeriodOptions,
+        periods: periodOptions.filter((option) => option.count > 0),
+      };
+    },
+
+    cultures: () => distinctArtworkValues(db, "culture"),
+    artPeriods: () => distinctArtworkValues(db, "period"),
+
+    countries: async () => {
+      const countries = await db.collection("met_artworks").aggregate<{ name: string }>([
+        { $match: { country: { $type: "string" } } },
+        { $project: { name: { $trim: { input: "$country" } } } },
+        { $match: { name: { $regex: "\\S" } } },
+        { $group: { _id: "$name" } },
+        { $sort: { _id: 1 } },
+        { $project: { _id: 0, name: "$_id" } },
+      ]).toArray();
+
+      return countries.map(({ name }) => name);
+    },
+
     artists: async (
       _: unknown,
       {
@@ -88,13 +302,33 @@ export function createArtworkResolvers(db: Db) {
         offset,
         search,
         artist,
+        artists,
+        country,
+        countries,
+        culture,
+        cultures,
+        artPeriod,
+        artPeriods,
         sort,
+        period,
+        dateFrom,
+        dateTo,
       }: {
         limit: number;
         offset: number;
         search?: string | null;
         artist?: string | null;
+        artists?: string[] | null;
+        country?: string | null;
+        countries?: string[] | null;
+        culture?: string | null;
+        cultures?: string[] | null;
+        artPeriod?: string | null;
+        artPeriods?: string[] | null;
         sort?: ArtworkSort;
+        period?: ArtworkPeriod;
+        dateFrom?: number | null;
+        dateTo?: number | null;
       },
     ) => {
       if (limit < 1 || limit > 100 || offset < 0) {
@@ -128,9 +362,100 @@ export function createArtworkResolvers(db: Db) {
           }
         : {};
 
+      const periodFilter = (() => {
+        switch (period) {
+          case "BEFORE_1500":
+            return { date_start: { $lte: 1499 } };
+          case "YEARS_1500_1799":
+            return { $expr: { $and: [
+              { $isNumber: "$date_start" },
+              { $lte: ["$date_start", 1799] },
+              { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1500] },
+            ] } };
+          case "CENTURY_19":
+            return { $expr: { $and: [
+              { $isNumber: "$date_start" },
+              { $lte: ["$date_start", 1899] },
+              { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1800] },
+            ] } };
+          case "CENTURY_20_PLUS":
+            return { $expr: { $and: [
+              { $isNumber: "$date_start" },
+              { $gte: [{ $cond: [{ $isNumber: "$date_end" }, "$date_end", "$date_start"] }, 1900] },
+            ] } };
+          default:
+            return {};
+        }
+      })();
+
+      const dateRangeFilter = (() => {
+        const conditions = [
+          { $isNumber: "$date_start" },
+          ...(typeof dateTo === "number" ? [{ $lte: ["$date_start", dateTo] }] : []),
+          ...(typeof dateFrom === "number"
+            ? [{
+                $gte: [
+                  {
+                    $cond: [
+                      { $isNumber: "$date_end" },
+                      "$date_end",
+                      "$date_start",
+                    ],
+                  },
+                  dateFrom,
+                ],
+              }]
+            : []),
+        ];
+
+        return conditions.length > 1 ? { $expr: { $and: conditions } } : {};
+      })();
+
       const filter = {
-        ...searchFilter,
-        ...(artist ? { artist_display: artist } : {}),
+        $and: [
+          searchFilter,
+          ...(artist ? [{ artist_display: artist }] : []),
+          ...(artists?.length ? [{
+            $expr: {
+              $in: [
+                { $trim: { input: { $ifNull: ["$artist_display", ""] } } },
+                artists,
+              ],
+            },
+          }] : []),
+          ...(country || countries?.length
+            ? [{
+                $expr: {
+                  $in: [
+                    { $trim: { input: { $ifNull: ["$country", ""] } } },
+                    countries?.length ? countries : [country],
+                  ],
+                },
+              }]
+            : []),
+          ...(culture || cultures?.length
+            ? [{
+                $expr: {
+                  $in: [
+                    { $trim: { input: { $ifNull: ["$culture", ""] } } },
+                    cultures?.length ? cultures : [culture],
+                  ],
+                },
+              }]
+            : []),
+          ...(artPeriod || artPeriods?.length
+            ? [{
+                $expr: {
+                  $in: [
+                    { $trim: { input: { $ifNull: ["$period", ""] } } },
+                    artPeriods?.length ? artPeriods : [artPeriod],
+                  ],
+                },
+              }]
+            : []),
+          periodFilter,
+          dateRangeFilter,
+        ],
       };
 
       let sortOrder: Record<string, 1 | -1>;
diff --git a/backend/src/graphql/typeDefs.ts b/backend/src/graphql/typeDefs.ts
index 9f2fe9e..a6be351 100644
--- a/backend/src/graphql/typeDefs.ts
+++ b/backend/src/graphql/typeDefs.ts
@@ -20,6 +20,19 @@ export const typeDefs = `#graphql
     totalCount: Int!
   }
 
+  type ArtworkFilterOption {
+    value: String!
+    count: Int!
+  }
+
+  type ArtworkFilterOptions {
+    artists: [ArtworkFilterOption!]!
+    countries: [ArtworkFilterOption!]!
+    cultures: [ArtworkFilterOption!]!
+    artPeriods: [ArtworkFilterOption!]!
+    periods: [ArtworkFilterOption!]!
+  }
+
   type User {
     id: ID!
     username: String!
@@ -55,6 +68,13 @@ export const typeDefs = `#graphql
     YEAR_DESC
   }
 
+  enum ArtworkPeriod {
+    BEFORE_1500
+    YEARS_1500_1799
+    CENTURY_19
+    CENTURY_20_PLUS
+  }
+
   type Query {
     artwork(id: Int!): Artwork
     hello: String!
@@ -65,7 +85,17 @@ export const typeDefs = `#graphql
       offset: Int!
       search: String
       artist: String
+      artists: [String!]
+      country: String
+      countries: [String!]
+      culture: String
+      cultures: [String!]
+      artPeriod: String
+      artPeriods: [String!]
       sort: ArtworkSort
+      period: ArtworkPeriod
+      dateFrom: Int
+      dateTo: Int
     ): ArtworkPage!
 
     artists(
@@ -74,6 +104,22 @@ export const typeDefs = `#graphql
       search: String
     ): [String!]!
 
+    countries: [String!]!
+    cultures: [String!]!
+    artPeriods: [String!]!
+
+    artworkFilterOptions(
+      search: String
+      artistSearch: String
+      artists: [String!]
+      countries: [String!]
+      cultures: [String!]
+      artPeriods: [String!]
+      period: ArtworkPeriod
+      dateFrom: Int
+      dateTo: Int
+    ): ArtworkFilterOptions!
+
     myGalleries: [Gallery!]!
     
     gallery(
diff --git a/frontend/src/components/ArtworkCard.tsx b/frontend/src/components/ArtworkCard.tsx
index ed9aaa7..4194223 100644
--- a/frontend/src/components/ArtworkCard.tsx
+++ b/frontend/src/components/ArtworkCard.tsx
@@ -29,9 +29,24 @@ export default function ArtworkCard({ artwork }: ArtworkCardProps) {
   const artist = artwork.artist_display?.trim() || "Unknown artist";
   const location = useLocation();
 
+// Made with AI help.
+  function rememberCataloguePosition() {
+    try {
+      sessionStorage.setItem("catalogue-return", JSON.stringify({
+        url: `${location.pathname}${location.search}`,
+        scrollY: window.scrollY,
+      }));
+    } catch {
+    }
+  }
+
   return (
     <article className="artwork-card">
-      <Link to={`/artworks/${artwork.id}`} state={{ from: location.pathname }}>
+      <Link
+        to={`/artworks/${artwork.id}`}
+        state={{ from: `${location.pathname}${location.search}`, scrollY: window.scrollY }}
+        onClick={rememberCataloguePosition}
+      >
         {artwork.image_url ? (
           <ArtworkImage
             key={artwork.image_url}
diff --git a/frontend/src/components/CatalogueControls.css b/frontend/src/components/CatalogueControls.css
new file mode 100644
index 0000000..e346a60
--- /dev/null
+++ b/frontend/src/components/CatalogueControls.css
@@ -0,0 +1,85 @@
+.year-range {
+  position: relative;
+  height: 28px;
+  touch-action: pan-y;
+}
+
+.year-range__track {
+  position: absolute;
+  top: 12px;
+  right: 9px;
+  left: 9px;
+  height: 4px;
+  border-radius: 999px;
+  background: #e5e1de;
+}
+
+.year-range__selected {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: #80766f;
+}
+
+.year-range__input {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 28px;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  pointer-events: none;
+}
+
+.year-range__input--active {
+  z-index: 2;
+}
+
+.year-range__input::-webkit-slider-runnable-track {
+  height: 4px;
+  background: transparent;
+}
+
+.year-range__input::-moz-range-track {
+  height: 4px;
+  background: transparent;
+}
+
+.year-range__input::-webkit-slider-thumb {
+  width: 18px;
+  height: 18px;
+  margin-top: -7px;
+  appearance: none;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: #80766f;
+  box-shadow: 0 0 0 1px #80766f;
+  cursor: grab;
+  pointer-events: auto;
+}
+
+.year-range__input::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: #80766f;
+  box-shadow: 0 0 0 1px #80766f;
+  cursor: grab;
+  pointer-events: auto;
+}
+
+.year-range__input:active::-webkit-slider-thumb,
+.year-range__input:active::-moz-range-thumb {
+  cursor: grabbing;
+}
+
+.year-range__input:focus-visible::-webkit-slider-thumb,
+.year-range__input:focus-visible::-moz-range-thumb {
+  outline: 3px solid #514943;
+  outline-offset: 3px;
+}
diff --git a/frontend/src/components/CatalogueControls.tsx b/frontend/src/components/CatalogueControls.tsx
index 91b6c9b..7b9040b 100644
--- a/frontend/src/components/CatalogueControls.tsx
+++ b/frontend/src/components/CatalogueControls.tsx
@@ -1,15 +1,31 @@
 import { useEffect, useState, type SubmitEvent } from "react";
 import { Search, SlidersHorizontal } from "lucide-react";
-import { useArtists } from "../hooks/useArtists";
+import { useArtworkFacets, type ArtworkFacetOption } from "../hooks/useArtworkFacets";
 import Select from "react-select";
+import "./CatalogueControls.css";
 import type { ArtworkSort } from "../types/ArtworkSort";
+import type { ArtworkPeriod } from "../types/ArtworkPeriod";
 
 type CatalogueControlsProps = {
+  search: string;
   onSearch: (value: string) => void;
-  artist: string;
-  onArtistChange: (value: string) => void;
+  artists: string[];
+  onArtistChange: (value: string[]) => void;
+  countries: string[];
+  onCountryChange: (value: string[]) => void;
+  cultures: string[];
+  onCultureChange: (value: string[]) => void;
+  artPeriods: string[];
+  onArtPeriodChange: (value: string[]) => void;
   sort: ArtworkSort | undefined;
   onSortChange: (value: ArtworkSort | undefined) => void;
+  period: ArtworkPeriod | undefined;
+  onPeriodChange: (value: ArtworkPeriod | undefined) => void;
+  dateFrom: number | undefined;
+  dateTo: number | undefined;
+  onDateRangeChange: (from: number | undefined, to: number | undefined) => void;
+  minYear: number;
+  maxYear: number;
   totalCount: number;
   onReset: () => void;
   showFilters: boolean;
@@ -17,6 +33,8 @@ type CatalogueControlsProps = {
   paginationVisible: boolean;
 };
 
+type FilterSection = "sort" | "artists" | "period" | "country" | "culture" | "artPeriod";
+
 const sortOptions: {
   value: ArtworkSort | "";
   label: string;
@@ -30,29 +48,101 @@ const sortOptions: {
     { value: "YEAR_DESC", label: "Year: newest first" },
   ];
 
+const periodOptions: { value: ArtworkPeriod | ""; label: string }[] = [
+  { value: "", label: "Any time" },
+  { value: "BEFORE_1500", label: "Before 1500" },
+  { value: "YEARS_1500_1799", label: "1500–1799" },
+  { value: "CENTURY_19", label: "1800s" },
+  { value: "CENTURY_20_PLUS", label: "1900 and later" },
+];
+
+function toFacetOptions(options: ArtworkFacetOption[]) {
+  return options.map(({ value, count }) => ({ value, label: `${value} (${count})` }));
+}
+
+function selectedFacetOptions(values: string[], options: ArtworkFacetOption[]) {
+  return values.map((value) => {
+    const option = options.find((candidate) => candidate.value === value);
+    return { value, label: option ? `${value} (${option.count})` : value };
+  });
+}
+
 export default function CatalogueControls({
+  search,
   onSearch,
-  artist,
+  artists: selectedArtists,
   onArtistChange,
+  countries: selectedCountries,
+  onCountryChange,
+  cultures: selectedCultures,
+  onCultureChange,
+  artPeriods: selectedArtPeriods,
+  onArtPeriodChange,
   sort,
   onSortChange,
+  period,
+  onPeriodChange,
+  dateFrom,
+  dateTo,
+  onDateRangeChange,
+  minYear,
+  maxYear,
   totalCount,
   onReset,
   showFilters,
   onToggleFilters,
   paginationVisible,
 }: CatalogueControlsProps) {
-  const [searchInput, setSearchInput] = useState("");
+  const [searchInput, setSearchInput] = useState(search);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
-  const [openSection, setOpenSection] = useState<"sort" | "artists" | null>(null);
+  const [openSections, setOpenSections] = useState<Set<FilterSection>>(() => new Set());
   const [artistSearchInput, setArtistSearchInput] = useState("");
   const [artistSearch, setArtistSearch] = useState("");
+  const [activeRangeThumb, setActiveRangeThumb] = useState<"from" | "to">("to");
+  const [draftFrom, setDraftFrom] = useState(dateFrom ?? minYear);
+  const [draftTo, setDraftTo] = useState(dateTo ?? maxYear);
+
+  useEffect(() => {
+    setDraftFrom(dateFrom ?? minYear);
+    setDraftTo(dateTo ?? maxYear);
+  }, [dateFrom, dateTo, minYear, maxYear, period]);
+
+  const rangeStart = draftFrom;
+  const rangeEnd = draftTo;
+  const rangeSpan = maxYear - minYear;
+  const rangeStartPercent = ((rangeStart - minYear) / rangeSpan) * 100;
+  const rangeEndPercent = ((rangeEnd - minYear) / rangeSpan) * 100;
+  const hasUnappliedDateRange =
+    rangeStart !== (dateFrom ?? minYear) || rangeEnd !== (dateTo ?? maxYear);
+
+  function toggleSection(section: FilterSection) {
+    setOpenSections((current) => {
+      const next = new Set(current);
+      if (next.has(section)) next.delete(section);
+      else next.add(section);
+      return next;
+    });
+  }
 
-  const {
-    artists,
-    loading: artistsLoading,
-    error: artistsError,
-  } = useArtists(artistSearch, showFilters);
+  const { options: facets, loading: facetsLoading, error: facetsError } = useArtworkFacets({
+    search,
+    artistSearch,
+    artists: selectedArtists,
+    countries: selectedCountries,
+    cultures: selectedCultures,
+    artPeriods: selectedArtPeriods,
+    period,
+    dateFrom,
+    dateTo,
+  }, showFilters);
+
+  const availablePeriodValues = new Set(facets.periods.map(({ value }) => value));
+  const availablePeriodOptions = periodOptions
+    .filter((option) => !option.value || availablePeriodValues.has(option.value) || option.value === period)
+    .map((option) => {
+      const facet = facets.periods.find(({ value }) => value === option.value);
+      return facet ? { ...option, label: `${option.label} (${facet.count})` } : option;
+    });
 
   useEffect(() => {
     if (!showFilters) return;
@@ -76,6 +166,8 @@ export default function CatalogueControls({
     setSearchInput("");
     setArtistSearchInput("");
     setArtistSearch("");
+    setDraftFrom(minYear);
+    setDraftTo(maxYear);
     onReset();
   }
 
@@ -175,17 +267,18 @@ export default function CatalogueControls({
           </button>
         </form>
       )}
-      {showFilters && (
-        <button
-          className="fixed inset-0 z-50 block h-full w-full cursor-pointer border-0 bg-black/40 lg:hidden"
-          onClick={onToggleFilters}
-          aria-label="Close filters"
-        />
-      )}
+      <button
+        className={`fixed inset-0 z-50 block h-full w-full border-0 bg-black/40 lg:hidden ${showFilters ? "opacity-100" : "pointer-events-none opacity-0"}`}
+        onClick={onToggleFilters}
+        aria-label="Close filters"
+        aria-hidden={!showFilters}
+        tabIndex={-1}
+      />
       <aside
         id="catalogue-filters"
-        hidden={!showFilters}
-        className={`${showFilters ? "flex" : "hidden"} fixed inset-y-0 left-0 z-[51] w-[min(88vw,25rem)] flex-col overflow-y-auto border-r border-[#d8d4d1] bg-white px-5 pt-6 shadow-[8px_0_30px_rgb(0_0_0_/_12%)] lg:static lg:col-start-1 lg:row-start-2 lg:row-span-4 lg:z-auto lg:w-auto lg:self-stretch lg:border-r lg:px-0 lg:pb-6 lg:pt-0 lg:pr-4 lg:shadow-none`}
+        aria-hidden={!showFilters}
+        inert={!showFilters}
+        className={`fixed inset-y-0 left-0 z-[51] flex w-[min(88vw,25rem)] flex-col overflow-y-auto border-r border-[#d8d4d1] bg-white px-5 pt-6 shadow-[8px_0_30px_rgb(0_0_0_/_12%)] transition-none lg:static lg:col-start-1 lg:row-start-2 lg:row-span-4 lg:z-auto lg:w-auto lg:min-w-0 lg:self-stretch lg:border-r lg:px-0 lg:pb-6 lg:pt-0 lg:pr-4 lg:shadow-none lg:overflow-x-hidden lg:transition-[transform,opacity] lg:duration-300 lg:ease-out motion-reduce:lg:transition-none ${showFilters ? "translate-x-0 opacity-100 lg:pointer-events-auto" : "-translate-x-full pointer-events-none opacity-0 lg:-translate-x-2 lg:pointer-events-none lg:opacity-0"}`}
         aria-label="Artwork filters"
       >
         <div className="flex-1">
@@ -193,12 +286,12 @@ export default function CatalogueControls({
             <button
               type="button"
               className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 pr-4 text-left font-sans text-sm uppercase tracking-[0.16em] text-[#282523]"
-              aria-expanded={openSection === "sort"}
-              onClick={() => setOpenSection(openSection === "sort" ? null : "sort")}
+              aria-expanded={openSections.has("sort")}
+              onClick={() => toggleSection("sort")}
             >
-              <span>Sort</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSection === "sort" ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
+              <span>Sort</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSections.has("sort") ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
             </button>
-            {openSection === "sort" && (
+            {openSections.has("sort") && (
               <div className="grid gap-2 pb-4 pt-0.5">
                 <label htmlFor="artwork-sort" className="text-xs text-[#80766f]">Sort by</label>
                 <Select
@@ -215,6 +308,276 @@ export default function CatalogueControls({
                     colors: { ...theme.colors, primary: "#80766f", primary25: "#f4f1ee", primary50: "#e8e3df", primary75: "#d8d0ca" },
                   })}
                 />
+
+              </div>
+            )}
+          </section>
+
+          <section className="border-b border-[#dedbd8]">
+            <button
+              type="button"
+              className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 pr-4 text-left font-sans text-sm uppercase tracking-[0.16em] text-[#282523]"
+              aria-expanded={openSections.has("culture")}
+              onClick={() => toggleSection("culture")}
+            >
+              <span>Culture</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSections.has("culture") ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
+            </button>
+            {openSections.has("culture") && (
+              <div className="grid gap-2 pb-4 pt-0.5">
+                <label htmlFor="culture-filter" className="text-xs text-[#80766f]">Culture</label>
+                <Select
+                  inputId="culture-filter"
+                  instanceId="culture-filter"
+                  className="w-full text-sm"
+                  options={toFacetOptions(facets.cultures)}
+                  value={selectedFacetOptions(selectedCultures, facets.cultures)}
+                  onChange={(options) => onCultureChange(options.map((option) => option.value))}
+                  isMulti
+                  isClearable
+                  isLoading={facetsLoading}
+                  isDisabled={facetsLoading}
+                  placeholder="Search or select a culture..."
+                  loadingMessage={() => "Updating available cultures..."}
+                  noOptionsMessage={() => facetsLoading ? "Updating available cultures..." : "No cultures with matching artworks"}
+                  styles={{ menu: (base) => ({ ...base, zIndex: 10 }) }}
+                  theme={(theme) => ({
+                    ...theme,
+                    borderRadius: 2,
+                    colors: { ...theme.colors, primary: "#80766f", primary25: "#f4f1ee", primary50: "#e8e3df", primary75: "#d8d0ca" },
+                  })}
+                />
+                {facetsError && (
+                  <p role="alert" className="mt-2 text-sm text-red-700">
+                    Could not load filter options: {facetsError}
+                  </p>
+                )}
+              </div>
+            )}
+          </section>
+
+          <section className="border-b border-[#dedbd8]">
+            <button
+              type="button"
+              className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 pr-4 text-left font-sans text-sm uppercase tracking-[0.16em] text-[#282523]"
+              aria-expanded={openSections.has("artPeriod")}
+              onClick={() => toggleSection("artPeriod")}
+            >
+              <span>Art periods</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSections.has("artPeriod") ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
+            </button>
+            {openSections.has("artPeriod") && (
+              <div className="grid gap-2 pb-4 pt-0.5">
+                <label htmlFor="art-period-filter" className="text-xs text-[#80766f]">Art period</label>
+                <Select
+                  inputId="art-period-filter"
+                  instanceId="art-period-filter"
+                  className="w-full text-sm"
+                  options={toFacetOptions(facets.artPeriods)}
+                  value={selectedFacetOptions(selectedArtPeriods, facets.artPeriods)}
+                  onChange={(options) => onArtPeriodChange(options.map((option) => option.value))}
+                  isMulti
+                  isClearable
+                  isLoading={facetsLoading}
+                  isDisabled={facetsLoading}
+                  placeholder="Search or select an art period..."
+                  loadingMessage={() => "Updating available art periods..."}
+                  noOptionsMessage={() => facetsLoading ? "Updating available art periods..." : "No art periods with matching artworks"}
+                  styles={{ menu: (base) => ({ ...base, zIndex: 10 }) }}
+                  theme={(theme) => ({
+                    ...theme,
+                    borderRadius: 2,
+                    colors: { ...theme.colors, primary: "#80766f", primary25: "#f4f1ee", primary50: "#e8e3df", primary75: "#d8d0ca" },
+                  })}
+                />
+                {facetsError && (
+                  <p role="alert" className="mt-2 text-sm text-red-700">
+                    Could not load filter options: {facetsError}
+                  </p>
+                )}
+              </div>
+            )}
+          </section>
+
+          <section className="border-b border-[#dedbd8]">
+            <button
+              type="button"
+              className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 pr-4 text-left font-sans text-sm uppercase tracking-[0.16em] text-[#282523]"
+              aria-expanded={openSections.has("country")}
+              onClick={() => toggleSection("country")}
+            >
+              <span>Around the world</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSections.has("country") ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
+            </button>
+            {openSections.has("country") && (
+              <div className="grid gap-2 pb-4 pt-0.5">
+                <label htmlFor="country-filter" className="text-xs text-[#80766f]">Country</label>
+                <Select
+                  inputId="country-filter"
+                  instanceId="country-filter"
+                  className="w-full text-sm"
+                  options={toFacetOptions(facets.countries)}
+                  value={selectedFacetOptions(selectedCountries, facets.countries)}
+                  onChange={(options) => onCountryChange(options.map((option) => option.value))}
+                  isMulti
+                  isClearable
+                  isLoading={facetsLoading}
+                  isDisabled={facetsLoading}
+                  placeholder="Search or select a country..."
+                  loadingMessage={() => "Updating available countries..."}
+                  noOptionsMessage={() => facetsLoading ? "Updating available countries..." : "No countries with matching artworks"}
+                  styles={{ menu: (base) => ({ ...base, zIndex: 10 }) }}
+                  theme={(theme) => ({
+                    ...theme,
+                    borderRadius: 2,
+                    colors: { ...theme.colors, primary: "#80766f", primary25: "#f4f1ee", primary50: "#e8e3df", primary75: "#d8d0ca" },
+                  })}
+                />
+                {facetsError && (
+                  <p role="alert" className="mt-2 text-sm text-red-700">
+                    Could not load filter options: {facetsError}
+                  </p>
+                )}
+              </div>
+            )}
+          </section>
+
+          <section className="border-b border-[#dedbd8]">
+            <button
+              type="button"
+              className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 pr-4 text-left font-sans text-sm uppercase tracking-[0.16em] text-[#282523]"
+              aria-expanded={openSections.has("period")}
+              onClick={() => toggleSection("period")}
+            >
+              <span>Time travel</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSections.has("period") ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
+            </button>
+            {openSections.has("period") && (
+              <div className="grid gap-2 pb-4 pt-0.5">
+                <label htmlFor="artwork-period" className="text-xs text-[#80766f]">Made in</label>
+                <Select
+                  inputId="artwork-period"
+                  instanceId="artwork-period"
+                  className="w-full text-sm"
+                  options={availablePeriodOptions}
+                  value={availablePeriodOptions.find((option) => option.value === (period ?? ""))
+                    ?? periodOptions.find((option) => option.value === (period ?? ""))}
+                  onChange={(option) => onPeriodChange(option?.value || undefined)}
+                  isSearchable={false}
+                  isDisabled={facetsLoading}
+                  styles={{
+                    menu: (base) => ({ ...base, zIndex: 10 }),
+                  }}
+                  theme={(theme) => ({
+                    ...theme,
+                    borderRadius: 2,
+                    colors: { ...theme.colors, primary: "#80766f", primary25: "#f4f1ee", primary50: "#e8e3df", primary75: "#d8d0ca" },
+                  })}
+                />
+                <div className="mt-3 border-t border-[#eeeae7] pt-3">
+                  <p className="mb-2 text-xs text-[#80766f]">Or choose an exact range</p>
+                  <div className="grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
+                    <label className="grid min-w-0 gap-1.5 text-xs text-[#514943]">
+                      <span className="flex items-center justify-between gap-2">
+                        <span>From</span>
+                        <input
+                          type="number"
+                          inputMode="numeric"
+                          aria-label="From year"
+                          min={minYear}
+                          max={draftTo}
+                          value={draftFrom}
+                          onChange={(event) => {
+                            const value = event.currentTarget.valueAsNumber;
+                            if (!Number.isFinite(value)) return;
+                            const from = Math.max(minYear, Math.min(value, draftTo));
+                            setDraftFrom(from);
+                          }}
+                          className="w-24 border border-[#d7d3d0] px-2 py-1.5 text-right text-sm text-[#292624] focus:outline-2 focus:outline-[#80766f]"
+                        />
+                      </span>
+                    </label>
+                    <label className="grid min-w-0 gap-1.5 text-xs text-[#514943]">
+                      <span className="flex items-center justify-between gap-2">
+                        <span>To</span>
+                        <input
+                          type="number"
+                          inputMode="numeric"
+                          aria-label="To year"
+                          min={draftFrom}
+                          max={maxYear}
+                          value={draftTo}
+                          onChange={(event) => {
+                            const value = event.currentTarget.valueAsNumber;
+                            if (!Number.isFinite(value)) return;
+                            const to = Math.min(maxYear, Math.max(value, draftFrom));
+                            setDraftTo(to);
+                          }}
+                          className="w-24 border border-[#d7d3d0] px-2 py-1.5 text-right text-sm text-[#292624] focus:outline-2 focus:outline-[#80766f]"
+                        />
+                      </span>
+                    </label>
+                  </div>
+                  <div className="year-range mt-4" aria-label="Select an artwork date range">
+                    <div className="year-range__track" aria-hidden="true">
+                      <span
+                        className="year-range__selected"
+                        style={{ left: `${rangeStartPercent}%`, width: `${rangeEndPercent - rangeStartPercent}%` }}
+                      />
+                    </div>
+                    <input
+                      type="range"
+                      aria-label="From year slider"
+                      min={minYear}
+                      max={maxYear}
+                      step={1}
+                      value={rangeStart}
+                      onFocus={() => setActiveRangeThumb("from")}
+                      onPointerDown={() => setActiveRangeThumb("from")}
+                      onChange={(event) => {
+                        const from = Math.min(Number(event.currentTarget.value), rangeEnd);
+                        setDraftFrom(from);
+                      }}
+                      className={`year-range__input ${activeRangeThumb === "from" ? "year-range__input--active" : ""}`}
+                    />
+                    <input
+                      type="range"
+                      aria-label="To year slider"
+                      min={minYear}
+                      max={maxYear}
+                      step={1}
+                      value={rangeEnd}
+                      onFocus={() => setActiveRangeThumb("to")}
+                      onPointerDown={() => setActiveRangeThumb("to")}
+                      onChange={(event) => {
+                        const to = Math.max(Number(event.currentTarget.value), rangeStart);
+                        setDraftTo(to);
+                      }}
+                      className={`year-range__input ${activeRangeThumb === "to" ? "year-range__input--active" : ""}`}
+                    />
+                  </div>
+                  {hasUnappliedDateRange && (
+                    <button
+                      type="button"
+                      onClick={() => onDateRangeChange(
+                        rangeStart <= minYear ? undefined : rangeStart,
+                        rangeEnd >= maxYear ? undefined : rangeEnd,
+                      )}
+                      className="mt-3 w-full cursor-pointer border border-[#80766f] bg-[#80766f] px-3 py-2.5 text-sm text-white hover:bg-[#6f655f]"
+                    >
+                      Apply date range
+                    </button>
+                  )}
+                  {(dateFrom !== undefined || dateTo !== undefined || hasUnappliedDateRange) && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setDraftFrom(minYear);
+                        setDraftTo(maxYear);
+                        onDateRangeChange(undefined, undefined);
+                      }}
+                      className="mt-2 cursor-pointer border-0 bg-transparent p-0 text-xs text-[#80766f] underline underline-offset-2 hover:text-[#292624]"
+                    >
+                      Clear date range
+                    </button>
+                  )}
+                </div>
               </div>
             )}
           </section>
@@ -223,12 +586,12 @@ export default function CatalogueControls({
             <button
               type="button"
               className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 pr-4 text-left font-sans text-sm uppercase tracking-[0.16em] text-[#282523]"
-              aria-expanded={openSection === "artists"}
-              onClick={() => setOpenSection(openSection === "artists" ? null : "artists")}
+              aria-expanded={openSections.has("artists")}
+              onClick={() => toggleSection("artists")}
             >
-              <span>Artists</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSection === "artists" ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
+              <span>Artists</span><span className={`h-2 w-2 border-b-[1.5px] border-r-[1.5px] border-current transition-transform ${openSections.has("artists") ? "-translate-y-0.5 rotate-225" : "-translate-y-0.5 rotate-45"}`} aria-hidden="true" />
             </button>
-            {openSection === "artists" && (
+            {openSections.has("artists") && (
               <div className="grid gap-2 pb-4 pt-0.5">
                 <label htmlFor="artist-filter" className="text-xs text-[#80766f]">Artist</label>
                 <Select
@@ -246,22 +609,24 @@ export default function CatalogueControls({
                       primary75: "#d8d0ca",
                     },
                   })}
-                  options={artists.map((name) => ({ value: name, label: name }))}
-                  value={artist ? { value: artist, label: artist } : null}
-                  onChange={(option) => onArtistChange(option?.value ?? "")}
+                  options={toFacetOptions(facets.artists)}
+                  value={selectedFacetOptions(selectedArtists, facets.artists)}
+                  onChange={(options) => onArtistChange(options.map((option) => option.value))}
                   inputValue={artistSearchInput}
                   onInputChange={(value) => setArtistSearchInput(value)}
+                  isMulti
                   isClearable
-                  isLoading={artistsLoading}
+                  isLoading={facetsLoading}
+                  isDisabled={facetsLoading}
                   filterOption={null}
                   placeholder="Search or select an artist..."
-                  loadingMessage={() => "Loading artists..."}
-                  noOptionsMessage={() => artistsLoading ? "Loading artists..." : "No matching artists"}
+                  loadingMessage={() => "Updating available artists..."}
+                  noOptionsMessage={() => facetsLoading ? "Updating available artists..." : "No artists with matching artworks"}
                 />
 
-                {artistsError && (
+                {facetsError && (
                   <p role="alert" className="mt-2 text-sm text-red-700">
-                    Could not load artists: {artistsError}
+                    Could not load filter options: {facetsError}
                   </p>
                 )}
               </div>
diff --git a/frontend/src/hooks/useArtworkFacets.ts b/frontend/src/hooks/useArtworkFacets.ts
new file mode 100644
index 0000000..bb51dab
--- /dev/null
+++ b/frontend/src/hooks/useArtworkFacets.ts
@@ -0,0 +1,142 @@
+import { useEffect, useState } from "react";
+
+export type ArtworkFacetOption = {
+  value: string;
+  count: number;
+};
+
+export type ArtworkFacetOptions = {
+  artists: ArtworkFacetOption[];
+  countries: ArtworkFacetOption[];
+  cultures: ArtworkFacetOption[];
+  artPeriods: ArtworkFacetOption[];
+  periods: ArtworkFacetOption[];
+};
+
+type ArtworkFacetFilters = {
+  search: string;
+  artistSearch: string;
+  artists: string[];
+  countries: string[];
+  cultures: string[];
+  artPeriods: string[];
+  period: string | undefined;
+  dateFrom: number | undefined;
+  dateTo: number | undefined;
+};
+
+const emptyOptions: ArtworkFacetOptions = {
+  artists: [],
+  countries: [],
+  cultures: [],
+  artPeriods: [],
+  periods: [],
+};
+
+export function useArtworkFacets(filters: ArtworkFacetFilters, enabled = true) {
+  const [options, setOptions] = useState<ArtworkFacetOptions>(emptyOptions);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const {
+    search,
+    artistSearch,
+    artists,
+    countries,
+    cultures,
+    artPeriods,
+    period,
+    dateFrom,
+    dateTo,
+  } = filters;
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const controller = new AbortController();
+
+    async function fetchFacets() {
+      setLoading(true);
+      setError("");
+
+      try {
+        const response = await fetch(`${import.meta.env.BASE_URL}graphql`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          signal: controller.signal,
+          body: JSON.stringify({
+            query: `
+              query ArtworkFilterOptions(
+                $search: String
+                $artistSearch: String
+                $artists: [String!]
+                $countries: [String!]
+                $cultures: [String!]
+                $artPeriods: [String!]
+                $period: ArtworkPeriod
+                $dateFrom: Int
+                $dateTo: Int
+              ) {
+                artworkFilterOptions(
+                  search: $search
+                  artistSearch: $artistSearch
+                  artists: $artists
+                  countries: $countries
+                  cultures: $cultures
+                  artPeriods: $artPeriods
+                  period: $period
+                  dateFrom: $dateFrom
+                  dateTo: $dateTo
+                ) {
+                  artists { value count }
+                  countries { value count }
+                  cultures { value count }
+                  artPeriods { value count }
+                  periods { value count }
+                }
+              }
+            `,
+            variables: {
+              search,
+              artistSearch,
+              artists,
+              countries,
+              cultures,
+              artPeriods,
+              period,
+              dateFrom,
+              dateTo,
+            },
+          }),
+        });
+
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const result = await response.json();
+        if (result.errors?.length) throw new Error(result.errors[0].message);
+
+        setOptions(result.data.artworkFilterOptions);
+      } catch (err) {
+        if (controller.signal.aborted) return;
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }
+
+    fetchFacets();
+    return () => controller.abort();
+  }, [
+    enabled,
+    search,
+    artistSearch,
+    artists,
+    countries,
+    cultures,
+    artPeriods,
+    period,
+    dateFrom,
+    dateTo,
+  ]);
+
+  return { options, loading, error };
+}
diff --git a/frontend/src/hooks/useArtworkOptions.ts b/frontend/src/hooks/useArtworkOptions.ts
new file mode 100644
index 0000000..071de47
--- /dev/null
+++ b/frontend/src/hooks/useArtworkOptions.ts
@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState } from "react";
+
+type ArtworkOptionField = "cultures" | "artPeriods";
+
+export function useArtworkOptions(field: ArtworkOptionField, enabled = true) {
+  const [options, setOptions] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const hasLoaded = useRef(false);
+
+  useEffect(() => {
+    if (!enabled || hasLoaded.current) return;
+
+    const controller = new AbortController();
+
+    async function fetchOptions() {
+      setLoading(true);
+      setError("");
+
+      try {
+        const response = await fetch(`${import.meta.env.BASE_URL}graphql`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          signal: controller.signal,
+          body: JSON.stringify({
+            query: `query ArtworkFilterOptions { ${field} }`,
+          }),
+        });
+
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const result = await response.json();
+        if (result.errors?.length) throw new Error(result.errors[0].message);
+
+        setOptions(result.data[field]);
+        hasLoaded.current = true;
+      } catch (err) {
+        if (controller.signal.aborted) return;
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }
+
+    fetchOptions();
+    return () => controller.abort();
+  }, [enabled, field]);
+
+  return { options, loading, error };
+}
diff --git a/frontend/src/hooks/useArtworks.ts b/frontend/src/hooks/useArtworks.ts
index df5abed..c492237 100644
--- a/frontend/src/hooks/useArtworks.ts
+++ b/frontend/src/hooks/useArtworks.ts
@@ -1,13 +1,20 @@
 import { useEffect, useState } from "react";
 import type { Artwork } from "../types/Artwork";
 import type { ArtworkSort } from "../types/ArtworkSort";
+import type { ArtworkPeriod } from "../types/ArtworkPeriod";
 
 export function useArtworks(
   page: number,
   pageSize = 12,
   search = "",
-  artist = "",
+  artists: string[] = [],
+  countries: string[] = [],
+  cultures: string[] = [],
+  artPeriods: string[] = [],
   sort?: ArtworkSort,
+  period?: ArtworkPeriod,
+  dateFrom?: number,
+  dateTo?: number,
 ) {
   const [artworks, setArtworks] = useState<Artwork[]>([]);
   const [totalCount, setTotalCount] = useState(0);
@@ -34,15 +41,27 @@ export function useArtworks(
                 $limit: Int!
                 $offset: Int!
                 $search: String
-                $artist: String
+                $artists: [String!]
+                $countries: [String!]
+                $cultures: [String!]
+                $artPeriods: [String!]
                 $sort: ArtworkSort
+                $period: ArtworkPeriod
+                $dateFrom: Int
+                $dateTo: Int
               ) {
                 artworks(
                   limit: $limit
                   offset: $offset
                   search: $search
-                  artist: $artist
+                  artists: $artists
+                  countries: $countries
+                  cultures: $cultures
+                  artPeriods: $artPeriods
                   sort: $sort
+                  period: $period
+                  dateFrom: $dateFrom
+                  dateTo: $dateTo
                 ) {
                   totalCount
                   artworks {
@@ -58,8 +77,14 @@ export function useArtworks(
               limit: pageSize,
               offset: (page - 1) * pageSize,
               search,
-              artist,
+              artists,
+              countries,
+              cultures,
+              artPeriods,
               sort,
+              period,
+              dateFrom,
+              dateTo,
             },
           }),
         });
@@ -90,7 +115,7 @@ export function useArtworks(
     fetchArtworks();
 
     return () => controller.abort();
-  }, [page, pageSize, search, artist, sort]);
+  }, [page, pageSize, search, artists, countries, cultures, artPeriods, sort, period, dateFrom, dateTo]);
 
   return { artworks, totalCount, loading, error };
 }
diff --git a/frontend/src/hooks/useCountries.ts b/frontend/src/hooks/useCountries.ts
new file mode 100644
index 0000000..1c9618d
--- /dev/null
+++ b/frontend/src/hooks/useCountries.ts
@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useCountries(enabled = true) {
+  const [countries, setCountries] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const hasLoaded = useRef(false);
+
+  useEffect(() => {
+    if (!enabled || hasLoaded.current) return;
+
+    const controller = new AbortController();
+
+    async function fetchCountries() {
+      setLoading(true);
+      setError("");
+
+      try {
+        const response = await fetch(`${import.meta.env.BASE_URL}graphql`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          signal: controller.signal,
+          body: JSON.stringify({
+            query: `query CountryOptions { countries }`,
+          }),
+        });
+
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const result = await response.json();
+        if (result.errors?.length) throw new Error(result.errors[0].message);
+
+        setCountries(result.data.countries);
+        hasLoaded.current = true;
+      } catch (err) {
+        if (controller.signal.aborted) return;
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }
+
+    fetchCountries();
+    return () => controller.abort();
+  }, [enabled]);
+
+  return { countries, loading, error };
+}
diff --git a/frontend/src/pages/ArtworkDetailPage.tsx b/frontend/src/pages/ArtworkDetailPage.tsx
index dca0323..26ee237 100644
--- a/frontend/src/pages/ArtworkDetailPage.tsx
+++ b/frontend/src/pages/ArtworkDetailPage.tsx
@@ -13,9 +13,12 @@ export default function ArtworkDetailPage() {
 
   const location = useLocation();
   const from = location.state?.from;
+  const scrollY = location.state?.scrollY;
 
   const backTo =
-    typeof from === "string" && from.startsWith("/galleries/") ? from : "/";
+    typeof from === "string" && from.startsWith("/") && !from.startsWith("//")
+      ? from
+      : "/";
 
   if (loading) {
     return (
@@ -44,6 +47,7 @@ export default function ArtworkDetailPage() {
     <section className="mx-auto w-full max-w-7xl px-6 py-14 sm:px-10 lg:px-16 lg:py-20">
       <Link
         to={backTo}
+        state={typeof scrollY === "number" ? { restoreScrollY: scrollY } : undefined}
         className="absolute left-4 top-4 z-10 p-2 hover:text-gray-500"
       >
         ← Back
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 11ce757..b8f806d 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,29 +1,77 @@
 import { useState, useEffect, useRef } from "react";
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
 import ArtworkGrid from "../components/ArtworkGrid";
 import Hero from "../components/Hero";
 import Pagination from "../components/Pagination";
 import { useArtworks } from "../hooks/useArtworks";
 import CatalogueControls from "../components/CatalogueControls";
 import type { ArtworkSort } from "../types/ArtworkSort";
+import type { ArtworkPeriod } from "../types/ArtworkPeriod";
 
 const PAGE_SIZE = 12;
+const MIN_ARTWORK_YEAR = -8000;
+const MAX_ARTWORK_YEAR = new Date().getFullYear();
 
 export default function HomePage() {
-  const [page, setPage] = useState(1);
-  const [search, setSearch] = useState("");
-  const [artist, setArtist] = useState("");
-  const [sort, setSort] = useState<ArtworkSort | undefined>(undefined);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [page, setPage] = useState(() => Math.max(1, Number(searchParams.get("page")) || 1));
+  const [search, setSearch] = useState(() => searchParams.get("search") ?? "");
+  const [artists, setArtists] = useState(() => searchParams.getAll("artist"));
+  const [countries, setCountries] = useState(() => searchParams.getAll("country"));
+  const [cultures, setCultures] = useState(() => searchParams.getAll("culture"));
+  const [artPeriods, setArtPeriods] = useState(() => searchParams.getAll("artPeriod"));
+  const [sort, setSort] = useState<ArtworkSort | undefined>(() => {
+    const value = searchParams.get("sort");
+    return ["TITLE_ASC", "TITLE_DESC", "ARTIST_ASC", "ARTIST_DESC", "YEAR_ASC", "YEAR_DESC"].includes(value ?? "")
+      ? (value as ArtworkSort)
+      : undefined;
+  });
+  const [period, setPeriod] = useState<ArtworkPeriod | undefined>(() => {
+    const value = searchParams.get("period");
+    return ["BEFORE_1500", "YEARS_1500_1799", "CENTURY_19", "CENTURY_20_PLUS"].includes(value ?? "")
+      ? (value as ArtworkPeriod)
+      : undefined;
+  });
+  const [dateFrom, setDateFrom] = useState<number | undefined>(() => {
+    const value = Number(searchParams.get("dateFrom"));
+    return searchParams.has("dateFrom") && Number.isFinite(value) ? value : undefined;
+  });
+  const [dateTo, setDateTo] = useState<number | undefined>(() => {
+    const value = Number(searchParams.get("dateTo"));
+    return searchParams.has("dateTo") && Number.isFinite(value) ? value : undefined;
+  });
   const [showLoading, setShowLoading] = useState(false);
   const [showFilters, setShowFilters] = useState(false);
   const [paginationVisible, setPaginationVisible] = useState(false);
   const paginationRef = useRef<HTMLDivElement>(null);
 
+  function updateQuery(values: Record<string, string | string[] | undefined>) {
+    const next = new URLSearchParams(searchParams);
+    for (const [key, value] of Object.entries(values)) {
+      next.delete(key);
+      if (Array.isArray(value)) {
+        for (const item of value) next.append(key, item);
+      } else if (value) {
+        next.set(key, value);
+      }
+    }
+    setSearchParams(next, { replace: true });
+  }
+
   const { artworks, totalCount, loading, error } = useArtworks(
     page,
     PAGE_SIZE,
     search,
-    artist,
+    artists,
+    countries,
+    cultures,
+    artPeriods,
     sort,
+    period,
+    dateFrom,
+    dateTo,
   );
   useEffect(() => {
     if (!loading) return;
@@ -53,36 +101,121 @@ export default function HomePage() {
     return () => observer.disconnect();
   }, [totalCount, error]);
 
+  // Made with help from AI.
   const totalPages = Math.ceil(totalCount / PAGE_SIZE);
+  useEffect(() => {
+    if (loading) return;
+
+    let returnScrollY = location.state?.restoreScrollY;
+    if (typeof returnScrollY !== "number") {
+      try {
+        const savedPosition = sessionStorage.getItem("catalogue-return");
+        if (savedPosition) {
+          const parsed = JSON.parse(savedPosition) as { url?: string; scrollY?: number };
+          if (`${location.pathname}${location.search}` === parsed.url) {
+            returnScrollY = parsed.scrollY;
+          }
+          sessionStorage.removeItem("catalogue-return");
+        }
+      } catch {
+      }
+    } else {
+      try {
+        sessionStorage.removeItem("catalogue-return");
+      } catch {
+      }
+    }
+
+    if (typeof returnScrollY !== "number") return;
+
+    window.requestAnimationFrame(() => {
+      window.scrollTo(0, returnScrollY);
+    });
+    if (location.state?.restoreScrollY !== undefined) {
+      navigate(`${location.pathname}${location.search}`, { replace: true, state: null });
+    }
+  }, [loading, location.key, location.pathname, location.search, location.state, navigate]);
+
   function handleSearch(value: string) {
     setShowLoading(false);
-    setSearch(value.trim());
+    const nextSearch = value.trim();
+    setSearch(nextSearch);
+    setPage(1);
+    updateQuery({ search: nextSearch, page: undefined });
+  }
+
+  function handleArtistChange(value: string[]) {
+    setShowLoading(false);
+    setArtists(value);
+    setPage(1);
+    updateQuery({ artist: value, page: undefined });
+  }
+
+  function handleCountryChange(value: string[]) {
+    setShowLoading(false);
+    setCountries(value);
+    setPage(1);
+    updateQuery({ country: value, page: undefined });
+  }
+
+  function handleCultureChange(value: string[]) {
+    setShowLoading(false);
+    setCultures(value);
     setPage(1);
+    updateQuery({ culture: value, page: undefined });
   }
 
-  function handleArtistChange(value: string) {
+  function handleArtPeriodChange(value: string[]) {
     setShowLoading(false);
-    setArtist(value);
+    setArtPeriods(value);
     setPage(1);
+    updateQuery({ artPeriod: value, page: undefined });
   }
 
   function handleSortChange(value: ArtworkSort | undefined) {
     setShowLoading(false);
     setSort(value);
     setPage(1);
+    updateQuery({ sort: value, page: undefined });
+  }
+
+  function handlePeriodChange(value: ArtworkPeriod | undefined) {
+    setShowLoading(false);
+    setPeriod(value);
+    setDateFrom(undefined);
+    setDateTo(undefined);
+    setPage(1);
+    updateQuery({ period: value, dateFrom: undefined, dateTo: undefined, page: undefined });
+  }
+
+  function handleDateRangeChange(from: number | undefined, to: number | undefined) {
+    setShowLoading(false);
+    setDateFrom(from);
+    setDateTo(to);
+    setPeriod(undefined);
+    setPage(1);
+    updateQuery({ period: undefined, dateFrom: from === undefined ? undefined : String(from), dateTo: to === undefined ? undefined : String(to), page: undefined });
   }
 
   function handlePageChange(value: number) {
     setShowLoading(false);
     setPage(value);
+    updateQuery({ page: value === 1 ? undefined : String(value) });
   }
 
   function handleReset() {
     setShowLoading(false);
     setSearch("");
-    setArtist("");
+    setArtists([]);
+    setCountries([]);
+    setCultures([]);
+    setArtPeriods([]);
     setSort(undefined);
+    setPeriod(undefined);
+    setDateFrom(undefined);
+    setDateTo(undefined);
     setPage(1);
+    setSearchParams({}, { replace: true });
   }
 
   return (
@@ -90,15 +223,35 @@ export default function HomePage() {
       <Hero />
 
       <section
-        className={`mx-3 lg:mx-8${showFilters ? " lg:grid lg:grid-cols-[minmax(230px,285px)_minmax(0,1fr)] lg:gap-x-6" : ""}`}
+        className="mx-3 lg:mx-8 lg:grid lg:transition-[grid-template-columns,column-gap] lg:duration-300 lg:ease-out motion-reduce:lg:transition-none"
+        style={{
+          gridTemplateColumns: showFilters
+            ? "285px minmax(0, 1fr)"
+            : "0px minmax(0, 1fr)",
+          columnGap: showFilters ? "1.5rem" : "0rem",
+        }}
         aria-label="Artworks"
       >
         <CatalogueControls
+          search={search}
           onSearch={handleSearch}
-          artist={artist}
+          artists={artists}
           onArtistChange={handleArtistChange}
+          countries={countries}
+          onCountryChange={handleCountryChange}
+          cultures={cultures}
+          onCultureChange={handleCultureChange}
+          artPeriods={artPeriods}
+          onArtPeriodChange={handleArtPeriodChange}
           sort={sort}
           onSortChange={handleSortChange}
+          period={period}
+          onPeriodChange={handlePeriodChange}
+          dateFrom={dateFrom}
+          dateTo={dateTo}
+          onDateRangeChange={handleDateRangeChange}
+          minYear={MIN_ARTWORK_YEAR}
+          maxYear={MAX_ARTWORK_YEAR}
           totalCount={totalCount}
           onReset={handleReset}
           showFilters={showFilters}
diff --git a/frontend/src/types/ArtworkPeriod.ts b/frontend/src/types/ArtworkPeriod.ts
new file mode 100644
index 0000000..fc68cd8
--- /dev/null
+++ b/frontend/src/types/ArtworkPeriod.ts
@@ -0,0 +1,5 @@
+export type ArtworkPeriod =
+  | "BEFORE_1500"
+  | "YEARS_1500_1799"
+  | "CENTURY_19"
+  | "CENTURY_20_PLUS";