diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index de4536a..3b608eb 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -8,14 +8,16 @@ import ArtworkDetailPage from "./pages/ArtworkDetailPage";
 import GalleryPage from "./pages/GalleryPage";
 import Footer from "./components/Footer";
 import ProtectedRoute from "./components/ProtectedRoute";
+import { useThemeStore } from "./store/themeStore";
 
 function App() {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
   // No footers for Login and CreateAccount Pages
   const { pathname } = useLocation();
   const showFooter = pathname !== "/login" && pathname !== "/create-account";
 
   return (
-    <div className="flex min-h-dvh flex-col">
+    <div className={`flex min-h-dvh flex-col transition-colors duration-300 ${isDarkMode ? "dark bg-[#171615] text-[#f3f0ea] [color-scheme:dark]" : "bg-white text-[#292624] [color-scheme:light]"}`}>
       <main>
         <Routes>
           <Route path="/" element={<HomePage />} />
diff --git a/frontend/src/assets/hero3.jpg b/frontend/src/assets/hero3.jpg
new file mode 100644
index 0000000..e27de58
Binary files /dev/null and b/frontend/src/assets/hero3.jpg differ
diff --git a/frontend/src/assets/hero4.jpg b/frontend/src/assets/hero4.jpg
new file mode 100644
index 0000000..6eadf23
Binary files /dev/null and b/frontend/src/assets/hero4.jpg differ
diff --git a/frontend/src/components/AddToGalleryModal.tsx b/frontend/src/components/AddToGalleryModal.tsx
index f50b902..fbf1a14 100644
--- a/frontend/src/components/AddToGalleryModal.tsx
+++ b/frontend/src/components/AddToGalleryModal.tsx
@@ -133,7 +133,7 @@ export default function AddToGalleryModal({
         role="dialog"
         aria-modal="true"
         aria-labelledby="add-to-gallery-title"
-        className="w-full max-w-md rounded-2xl bg-white p-6 shadow-lg"
+        className="w-full max-w-md rounded-2xl bg-white p-6 shadow-lg dark:bg-[#242321] dark:text-[#f3f0ea]"
       >
         <div className="flex items-center justify-between">
           <h2 id="add-to-gallery-title" className="font-serif text-2xl">
@@ -144,16 +144,16 @@ export default function AddToGalleryModal({
             type="button"
             onClick={onClose}
             aria-label="Close"
-            className="text-2xl text-gray-500 hover:text-black"
+            className="text-2xl text-gray-500 hover:text-black dark:text-gray-300 dark:hover:text-white"
           >
             ×
           </button>
         </div>
 
         {loading ? (
-          <p className="mt-6 text-gray-500">Loading galleries...</p>
+          <p className="mt-6 text-gray-500 dark:text-gray-400">Loading galleries...</p>
         ) : galleries.length === 0 ? (
-          <p className="mt-6 text-gray-500">
+          <p className="mt-6 text-gray-500 dark:text-gray-400">
             You have not created any galleries yet.
           </p>
         ) : (
@@ -163,7 +163,7 @@ export default function AddToGalleryModal({
                 key={gallery.id}
                 type="button"
                 onClick={() => void handleAddToGallery(gallery.id)}
-                className="rounded-lg border border-gray-200 px-4 py-3 text-left transition hover:bg-gray-100"
+                className="rounded-lg border border-gray-200 px-4 py-3 text-left transition hover:bg-gray-100 dark:border-[#504b46] dark:hover:bg-[#35322e]"
               >
                 {gallery.title}
               </button>
diff --git a/frontend/src/components/ArtworkCard.css b/frontend/src/components/ArtworkCard.css
index 6da270d..437bbf5 100644
--- a/frontend/src/components/ArtworkCard.css
+++ b/frontend/src/components/ArtworkCard.css
@@ -1,30 +1,32 @@
-.artwork-card {
-  min-width: 0;
-  padding: 16px;
-  border: 1px solid #dedede;
-  border-radius: 4px;
-  background: #fff;
-  color: #171717;
-  text-align: left;
-}
+@layer components {
+  .artwork-card {
+    min-width: 0;
+    padding: 16px;
+    border: 1px solid #dedede;
+    border-radius: 4px;
+    background: #fff;
+    color: #171717;
+    text-align: left;
+  }
 
-.artwork-card__image,
-.artwork-card__placeholder {
-  display: block;
-  width: 100%;
-  aspect-ratio: 4 / 5;
-}
+  .artwork-card__image,
+  .artwork-card__placeholder {
+    display: block;
+    width: 100%;
+    aspect-ratio: 4 / 5;
+  }
 
-.artwork-card__image {
-  object-fit: contain;
-  background: #f5f4f1;
-}
+  .artwork-card__image {
+    object-fit: contain;
+    background: #f5f4f1;
+  }
 
-.artwork-card__placeholder {
-  display: grid;
-  place-items: center;
-  background: #f5f4f1;
-  color: #595959;
+  .artwork-card__placeholder {
+    display: grid;
+    place-items: center;
+    background: #f5f4f1;
+    color: #595959;
+  }
 }
 
 .artwork-card__title {
diff --git a/frontend/src/components/ArtworkCard.tsx b/frontend/src/components/ArtworkCard.tsx
index 4194223..18dd6a8 100644
--- a/frontend/src/components/ArtworkCard.tsx
+++ b/frontend/src/components/ArtworkCard.tsx
@@ -1,33 +1,42 @@
 import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Plus } from "lucide-react";
 import type { Artwork } from "../types/Artwork";
+import { useAuthStore } from "../store/authStore";
+import AddToGalleryModal from "./AddToGalleryModal";
 import "./ArtworkCard.css";
 
 type ArtworkCardProps = {
   artwork: Artwork;
+  showGalleryAction?: boolean;
 };
 
 function ArtworkImage({ src, alt }: { src: string; alt: string }) {
   const [hasError, setHasError] = useState(false);
 
   if (hasError) {
-    return <div className="artwork-card__placeholder">Image unavailable</div>;
+    return <div className="artwork-card__placeholder dark:bg-[#302e2a] dark:text-gray-300">Image unavailable</div>;
   }
 
   return (
-    <img
-      className="artwork-card__image"
-      src={src}
-      alt={alt}
-      loading="lazy"
-      onError={() => setHasError(true)}
-    />
+    <div className="overflow-hidden">
+      <img
+        className="artwork-card__image bg-[#f5f4f1] transition-transform duration-300 ease-out group-hover:scale-[1.03] motion-reduce:transition-none dark:bg-[#302e2a]"
+        src={src}
+        alt={alt}
+        loading="lazy"
+        onError={() => setHasError(true)}
+      />
+    </div>
   );
 }
 
-export default function ArtworkCard({ artwork }: ArtworkCardProps) {
+export default function ArtworkCard({ artwork, showGalleryAction = true }: ArtworkCardProps) {
   const artist = artwork.artist_display?.trim() || "Unknown artist";
   const location = useLocation();
+  const navigate = useNavigate();
+  const isLoggedIn = useAuthStore((state) => Boolean(state.token));
+  const [showGalleryModal, setShowGalleryModal] = useState(false);
 
 // Made with AI help.
   function rememberCataloguePosition() {
@@ -41,10 +50,11 @@ export default function ArtworkCard({ artwork }: ArtworkCardProps) {
   }
 
   return (
-    <article className="artwork-card">
+    <article className="artwork-card relative border-[#dedede] bg-white text-[#171717] dark:border-[#47433e] dark:bg-[#22211f] dark:text-[#f3f0ea]">
       <Link
         to={`/artworks/${artwork.id}`}
-        state={{ from: `${location.pathname}${location.search}`, scrollY: window.scrollY }}
+        className="group block"
+        state={{ from: `${location.pathname}${location.search}` }}
         onClick={rememberCataloguePosition}
       >
         {artwork.image_url ? (
@@ -54,12 +64,34 @@ export default function ArtworkCard({ artwork }: ArtworkCardProps) {
             alt={artwork.image_url || `${artwork.title} by ${artist}`}
           />
         ) : (
-          <div className="artwork-card__placeholder">Image unavailable</div>
+          <div className="artwork-card__placeholder dark:bg-[#302e2a] dark:text-gray-300">Image unavailable</div>
         )}
 
         <h3 className="artwork-card__title">{artwork.title}</h3>
         <p className="artwork-card__artist">{artist}</p>
       </Link>
+
+      {showGalleryAction && (
+        <button
+          type="button"
+          aria-label={isLoggedIn ? `Add ${artwork.title} to a gallery` : "Sign in to add this artwork to a gallery"}
+          title={isLoggedIn ? "Add to gallery" : "Sign in to add to a gallery"}
+          onClick={() => {
+            if (isLoggedIn) setShowGalleryModal(true);
+            else navigate("/login");
+          }}
+          className="absolute right-5 top-5 z-10 grid h-10 w-10 cursor-pointer place-items-center rounded-full border border-gray-300 bg-white/95 text-gray-700 shadow-sm transition hover:border-gray-500 hover:bg-white hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:border-[#5b554e] dark:bg-[#292724]/95 dark:text-gray-200 dark:hover:border-gray-400 dark:hover:bg-[#35322e] dark:hover:text-white"
+        >
+          <Plus size={21} strokeWidth={1.7} aria-hidden="true" />
+        </button>
+      )}
+
+      {showGalleryAction && showGalleryModal && (
+        <AddToGalleryModal
+          artworkId={artwork.id}
+          onClose={() => setShowGalleryModal(false)}
+        />
+      )}
     </article>
   );
 }
diff --git a/frontend/src/components/ArtworkGrid.tsx b/frontend/src/components/ArtworkGrid.tsx
index 42eceaa..fd52685 100644
--- a/frontend/src/components/ArtworkGrid.tsx
+++ b/frontend/src/components/ArtworkGrid.tsx
@@ -6,11 +6,13 @@ import "./ArtworkGrid.css";
 type ArtworkGridProps = {
   artworks: Artwork[];
   renderAction?: (artwork: Artwork) => ReactNode;
+  showGalleryActions?: boolean;
 };
 
 export default function ArtworkGrid({
   artworks,
   renderAction,
+  showGalleryActions = true,
 }: ArtworkGridProps) {
   if (artworks.length === 0) {
     return <p>No artworks to display.</p>;
@@ -20,7 +22,7 @@ export default function ArtworkGrid({
     <ul className="artwork-grid" aria-label="Artwork results" role="list">
       {artworks.map((artwork) => (
         <li key={artwork.id} className="relative">
-          <ArtworkCard artwork={artwork} />
+          <ArtworkCard artwork={artwork} showGalleryAction={showGalleryActions} />
           {renderAction?.(artwork)}
         </li>
       ))}
diff --git a/frontend/src/components/CatalogueControls.tsx b/frontend/src/components/CatalogueControls.tsx
index 7b9040b..a037dcf 100644
--- a/frontend/src/components/CatalogueControls.tsx
+++ b/frontend/src/components/CatalogueControls.tsx
@@ -1,7 +1,11 @@
-import { useEffect, useState, type SubmitEvent } from "react";
-import { Search, SlidersHorizontal } from "lucide-react";
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type SubmitEvent } from "react";
+import { CircleUserRound, Search, SlidersHorizontal } from "lucide-react";
+import { Link } from "react-router-dom";
 import { useArtworkFacets, type ArtworkFacetOption } from "../hooks/useArtworkFacets";
-import Select from "react-select";
+import { useThemeStore } from "../store/themeStore";
+import { useAuthStore } from "../store/authStore";
+import ThemeToggleButton from "./ThemeToggleButton";
+import Select, { type Theme } from "react-select";
 import "./CatalogueControls.css";
 import type { ArtworkSort } from "../types/ArtworkSort";
 import type { ArtworkPeriod } from "../types/ArtworkPeriod";
@@ -31,6 +35,7 @@ type CatalogueControlsProps = {
   showFilters: boolean;
   onToggleFilters: () => void;
   paginationVisible: boolean;
+  galleryVisible: boolean;
 };
 
 type FilterSection = "sort" | "artists" | "period" | "country" | "culture" | "artPeriod";
@@ -67,6 +72,31 @@ function selectedFacetOptions(values: string[], options: ArtworkFacetOption[]) {
   });
 }
 
+function selectTheme(theme: Theme, isDarkMode: boolean): Theme {
+  return {
+    ...theme,
+    borderRadius: 2,
+    colors: {
+      ...theme.colors,
+      primary: isDarkMode ? "#a99b8d" : "#80766f",
+      primary25: isDarkMode ? "#3a3733" : "#f4f1ee",
+      primary50: isDarkMode ? "#4a4540" : "#e8e3df",
+      primary75: isDarkMode ? "#5b544d" : "#d8d0ca",
+      neutral0: isDarkMode ? "#242321" : "#ffffff",
+      neutral5: isDarkMode ? "#2a2927" : "#faf9f8",
+      neutral10: isDarkMode ? "#35332f" : "#f2f2f2",
+      neutral20: isDarkMode ? "#494540" : "#cccccc",
+      neutral30: isDarkMode ? "#625c55" : "#b3b3b3",
+      neutral40: isDarkMode ? "#8e857c" : "#999999",
+      neutral50: isDarkMode ? "#aaa198" : "#808080",
+      neutral60: isDarkMode ? "#c0b8af" : "#666666",
+      neutral70: isDarkMode ? "#d5cec5" : "#4d4d4d",
+      neutral80: isDarkMode ? "#eee9e2" : "#333333",
+      neutral90: isDarkMode ? "#f7f4ef" : "#1a1a1a",
+    },
+  };
+}
+
 export default function CatalogueControls({
   search,
   onSearch,
@@ -92,7 +122,10 @@ export default function CatalogueControls({
   showFilters,
   onToggleFilters,
   paginationVisible,
+  galleryVisible,
 }: CatalogueControlsProps) {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const isLoggedIn = useAuthStore((state) => Boolean(state.token));
   const [searchInput, setSearchInput] = useState(search);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
   const [openSections, setOpenSections] = useState<Set<FilterSection>>(() => new Set());
@@ -101,12 +134,27 @@ export default function CatalogueControls({
   const [activeRangeThumb, setActiveRangeThumb] = useState<"from" | "to">("to");
   const [draftFrom, setDraftFrom] = useState(dateFrom ?? minYear);
   const [draftTo, setDraftTo] = useState(dateTo ?? maxYear);
+  const [isMobileLayout, setIsMobileLayout] = useState(
+    () => typeof window !== "undefined" && window.matchMedia("(max-width: 1023px)").matches,
+  );
+  const filterPanelRef = useRef<HTMLElement>(null);
+  const desktopFilterButtonRef = useRef<HTMLButtonElement>(null);
+  const mobileFilterButtonRef = useRef<HTMLButtonElement>(null);
+  const mobileSearchButtonRef = useRef<HTMLButtonElement>(null);
+  const previousShowFilters = useRef(showFilters);
 
   useEffect(() => {
     setDraftFrom(dateFrom ?? minYear);
     setDraftTo(dateTo ?? maxYear);
   }, [dateFrom, dateTo, minYear, maxYear, period]);
 
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 1023px)");
+    const updateLayout = () => setIsMobileLayout(mediaQuery.matches);
+    mediaQuery.addEventListener("change", updateLayout);
+    return () => mediaQuery.removeEventListener("change", updateLayout);
+  }, []);
+
   const rangeStart = draftFrom;
   const rangeEnd = draftTo;
   const rangeSpan = maxYear - minYear;
@@ -156,6 +204,54 @@ export default function CatalogueControls({
     };
   }, [artistSearchInput, showFilters]);
 
+  useEffect(() => {
+    const wasOpen = previousShowFilters.current;
+    previousShowFilters.current = showFilters;
+    if (isMobileLayout && showFilters && !wasOpen) {
+      filterPanelRef.current?.querySelector<HTMLElement>("button:not(:disabled)")?.focus();
+    } else if (!showFilters && wasOpen) {
+      (isMobileLayout ? mobileFilterButtonRef.current : desktopFilterButtonRef.current)?.focus();
+    }
+  }, [isMobileLayout, showFilters]);
+
+  useEffect(() => {
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+
+      if (mobileSearchOpen) {
+        setMobileSearchOpen(false);
+        mobileSearchButtonRef.current?.focus();
+      } else if (showFilters) {
+        onToggleFilters();
+      }
+    }
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [mobileSearchOpen, onToggleFilters, showFilters]);
+
+  function handleFilterPanelKeyDown(event: ReactKeyboardEvent<HTMLElement>) {
+    if (event.key !== "Tab" || !showFilters || !isMobileLayout) return;
+
+    const focusableElements = filterPanelRef.current?.querySelectorAll<HTMLElement>(
+      'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',
+    );
+    if (!focusableElements?.length) {
+      event.preventDefault();
+      return;
+    }
+
+    const first = focusableElements[0];
+    const last = focusableElements[focusableElements.length - 1];
+    if (event.shiftKey && (document.activeElement === first || !filterPanelRef.current?.contains(document.activeElement))) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && (document.activeElement === last || !filterPanelRef.current?.contains(document.activeElement))) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
   function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
     event.preventDefault();
     onSearch(searchInput);
@@ -178,19 +274,29 @@ export default function CatalogueControls({
   // AI was primary used here to get the styling we wanted for the filter options.
   return (
     <div className="contents">
-      <div className="col-span-full row-start-1 hidden min-h-16 flex-wrap items-center gap-3 border-y border-[#dedbd8] pb-3 pt-[2rem] lg:flex lg:gap-5 lg:pb-4 lg:pt-[9rem]">
+      <div id="catalogue-controls" className="sticky top-0 z-30 col-span-full row-start-1 hidden min-h-16 flex-wrap items-center gap-3 border-y border-[#dedbd8] bg-white/95 px-3 py-3 backdrop-blur dark:border-[#46413c] dark:bg-[#1d1c1a]/90 lg:flex lg:gap-5 lg:px-4 lg:py-4">
         <button
           type="button"
+          ref={desktopFilterButtonRef}
           onClick={onToggleFilters}
           aria-expanded={showFilters}
           aria-controls="catalogue-filters"
-          className="inline-flex cursor-pointer items-center gap-3 border-0 bg-transparent px-0 py-1 text-[0.95rem] text-[#80766f] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#80766f] lg:text-base"
+          className="inline-flex cursor-pointer items-center gap-3 border-0 bg-transparent px-0 py-1 text-[0.95rem] text-[#80766f] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:text-white lg:text-base"
         >
           <SlidersHorizontal size={19} strokeWidth={1.5} aria-hidden="true" />
           {showFilters ? "Hide filters" : "Show filters"}
         </button>
 
-        <form role="search" onSubmit={handleSubmit} className="ml-auto flex min-w-32 flex-1 lg:w-full lg:max-w-[27rem] lg:flex-none">
+        <Link
+          to={isLoggedIn ? "/profile" : "/login"}
+          aria-label={isLoggedIn ? "Open profile" : "Open login"}
+          className="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white"
+        >
+          <CircleUserRound size={23} strokeWidth={1.5} aria-hidden="true" />
+        </Link>
+        <ThemeToggleButton className="grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white" />
+
+        <form role="search" onSubmit={handleSubmit} className="ml-auto flex min-w-0 flex-1 lg:max-w-[27rem]">
           <label htmlFor="artwork-search" className="sr-only">
             Search artworks by title or artist
           </label>
@@ -202,49 +308,51 @@ export default function CatalogueControls({
             placeholder="Search by artist or artwork..."
             value={searchInput}
             onChange={(event) => setSearchInput(event.target.value)}
-            className="min-w-0 flex-1 rounded-none border border-r-0 border-[#d7d3d0] bg-white px-2.5 py-2 text-sm text-[#292624] placeholder:text-gray-500 focus:border-[#80766f] focus:outline-2 focus:outline-[#80766f] lg:px-3"
+            className="min-w-0 flex-1 rounded-none border border-r-0 border-[#d7d3d0] bg-white px-2.5 py-2 text-sm text-[#292624] placeholder:text-gray-500 focus:border-[#80766f] focus:outline-2 focus:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea] dark:placeholder:text-gray-400 lg:px-3"
           />
 
           <button
             type="submit"
-            className="grid shrink-0 cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-3 text-[#514943] hover:bg-[#f4f1ee] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-[#80766f] lg:px-4"
+            className="grid shrink-0 cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-3 text-[#514943] hover:bg-[#f4f1ee] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] dark:hover:bg-[#35322e] lg:px-4"
             aria-label="Search artworks"
           >
             <Search size={18} aria-hidden="true" />
           </button>
         </form>
-        <p className="m-0 hidden shrink-0 whitespace-nowrap text-[0.95rem] text-[#80766f] lg:block">
+        <p className="m-0 hidden shrink-0 whitespace-nowrap text-[0.95rem] text-[#80766f] dark:text-[#b6aaa0] lg:block">
           {totalCount} {totalCount === 1 ? "result" : "results"}
         </p>
       </div>
       <div
-        className={`fixed bottom-4 left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-md border border-[#dedbd8] bg-white/95 p-2 shadow-lg backdrop-blur transition duration-200 lg:hidden ${paginationVisible ? "pointer-events-none translate-y-24 opacity-0" : "translate-y-0 opacity-100"}`}
+        className={`fixed bottom-4 left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-md border border-[#dedbd8] bg-white/95 p-2 shadow-lg backdrop-blur transition duration-200 dark:border-[#46413c] dark:bg-[#1d1c1a]/95 lg:hidden ${galleryVisible && !paginationVisible ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-24 opacity-0"}`}
       >
         <button
           type="button"
+          ref={mobileFilterButtonRef}
           onClick={onToggleFilters}
           aria-expanded={showFilters}
           aria-controls="catalogue-filters"
-          className="inline-flex min-h-12 cursor-pointer items-center gap-2 border-0 bg-white px-4 text-base text-[#80766f] shadow-sm"
+          className="inline-flex min-h-12 cursor-pointer items-center gap-2 border-0 bg-white px-4 text-base text-[#80766f] shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:bg-[#292724] dark:text-[#c0b5aa]"
         >
           <SlidersHorizontal size={19} strokeWidth={1.5} aria-hidden="true" />
           Filter
         </button>
         <button
           type="button"
+          ref={mobileSearchButtonRef}
           onClick={() => setMobileSearchOpen((current) => !current)}
           aria-expanded={mobileSearchOpen}
           aria-label={mobileSearchOpen ? "Close search" : "Open search"}
-          className="grid min-h-12 min-w-12 cursor-pointer place-items-center border-0 bg-white text-[#292624] shadow-sm"
+          className="grid min-h-12 min-w-12 cursor-pointer place-items-center border-0 bg-white text-[#292624] shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:bg-[#292724] dark:text-[#f3f0ea]"
         >
           <Search size={21} aria-hidden="true" />
         </button>
       </div>
-      {mobileSearchOpen && !paginationVisible && (
+      {mobileSearchOpen && galleryVisible && !paginationVisible && (
         <form
           role="search"
           onSubmit={handleSubmit}
-          className="fixed bottom-24 left-4 right-4 z-40 flex border border-[#d7d3d0] bg-white p-2 shadow-lg lg:hidden"
+          className="fixed bottom-24 left-4 right-4 z-40 flex border border-[#d7d3d0] bg-white p-2 shadow-lg dark:border-[#504b46] dark:bg-[#242321] lg:hidden"
         >
           <label htmlFor="mobile-artwork-search" className="sr-only">
             Search artworks by title or artist
@@ -256,12 +364,12 @@ export default function CatalogueControls({
             placeholder="Search by artist or artwork..."
             value={searchInput}
             onChange={(event) => setSearchInput(event.target.value)}
-            className="min-w-0 flex-1 border border-r-0 border-[#d7d3d0] px-3 py-2 text-sm text-[#292624] focus:outline-2 focus:outline-[#80766f]"
+            className="min-w-0 flex-1 border border-r-0 border-[#d7d3d0] px-3 py-2 text-sm text-[#292624] focus:outline-2 focus:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
           />
           <button
             type="submit"
             aria-label="Search artworks"
-            className="grid cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-4 text-[#514943]"
+            className="grid cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-4 text-[#514943] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6]"
           >
             <Search size={18} aria-hidden="true" />
           </button>
@@ -275,17 +383,22 @@ export default function CatalogueControls({
         tabIndex={-1}
       />
       <aside
+        ref={filterPanelRef}
         id="catalogue-filters"
+        role={showFilters && isMobileLayout ? "dialog" : undefined}
+        aria-modal={showFilters && isMobileLayout ? true : undefined}
+        onKeyDown={handleFilterPanelKeyDown}
         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"}`}
+        // Made with AI help.
+        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 dark:border-[#45413c] dark:bg-[#1d1c1a] lg:sticky lg:top-20 lg:col-start-1 lg:row-start-2 lg:row-span-3 lg:z-auto lg:max-h-[calc(100dvh-5rem)] lg:w-auto lg:min-w-0 lg:self-start 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 scroll-mt-4 ${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">
-          <section className="border-b border-[#dedbd8]">
+        <div className="flex-1 lg:min-h-0 lg:overflow-y-auto">
+          <section className="border-b border-[#dedbd8] dark:border-[#45413c]">
             <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]"
+              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] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#eee9e2]"
               aria-expanded={openSections.has("sort")}
               onClick={() => toggleSection("sort")}
             >
@@ -293,7 +406,7 @@ export default function CatalogueControls({
             </button>
             {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>
+                <label htmlFor="artwork-sort" className="text-xs text-[#80766f] dark:text-[#b6aaa0]">Sort by</label>
                 <Select
                   inputId="artwork-sort"
                   instanceId="artwork-sort"
@@ -302,21 +415,17 @@ export default function CatalogueControls({
                   value={sortOptions.find((option) => option.value === (sort ?? ""))}
                   onChange={(option) => onSortChange(option?.value || undefined)}
                   isSearchable={false}
-                  theme={(theme) => ({
-                    ...theme,
-                    borderRadius: 2,
-                    colors: { ...theme.colors, primary: "#80766f", primary25: "#f4f1ee", primary50: "#e8e3df", primary75: "#d8d0ca" },
-                  })}
+                  theme={(theme) => selectTheme(theme, isDarkMode)}
                 />
 
               </div>
             )}
           </section>
 
-          <section className="border-b border-[#dedbd8]">
+          <section className="border-b border-[#dedbd8] dark:border-[#45413c]">
             <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]"
+              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] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#eee9e2]"
               aria-expanded={openSections.has("culture")}
               onClick={() => toggleSection("culture")}
             >
@@ -324,7 +433,7 @@ export default function CatalogueControls({
             </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>
+                <label htmlFor="culture-filter" className="text-xs text-[#80766f] dark:text-[#b6aaa0]">Culture</label>
                 <Select
                   inputId="culture-filter"
                   instanceId="culture-filter"
@@ -340,11 +449,7 @@ export default function CatalogueControls({
                   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" },
-                  })}
+                  theme={(theme) => selectTheme(theme, isDarkMode)}
                 />
                 {facetsError && (
                   <p role="alert" className="mt-2 text-sm text-red-700">
@@ -355,10 +460,10 @@ export default function CatalogueControls({
             )}
           </section>
 
-          <section className="border-b border-[#dedbd8]">
+          <section className="border-b border-[#dedbd8] dark:border-[#45413c]">
             <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]"
+              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] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#eee9e2]"
               aria-expanded={openSections.has("artPeriod")}
               onClick={() => toggleSection("artPeriod")}
             >
@@ -366,7 +471,7 @@ export default function CatalogueControls({
             </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>
+                <label htmlFor="art-period-filter" className="text-xs text-[#80766f] dark:text-[#b6aaa0]">Art period</label>
                 <Select
                   inputId="art-period-filter"
                   instanceId="art-period-filter"
@@ -382,11 +487,7 @@ export default function CatalogueControls({
                   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" },
-                  })}
+                  theme={(theme) => selectTheme(theme, isDarkMode)}
                 />
                 {facetsError && (
                   <p role="alert" className="mt-2 text-sm text-red-700">
@@ -397,10 +498,10 @@ export default function CatalogueControls({
             )}
           </section>
 
-          <section className="border-b border-[#dedbd8]">
+          <section className="border-b border-[#dedbd8] dark:border-[#45413c]">
             <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]"
+              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] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#eee9e2]"
               aria-expanded={openSections.has("country")}
               onClick={() => toggleSection("country")}
             >
@@ -408,7 +509,7 @@ export default function CatalogueControls({
             </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>
+                <label htmlFor="country-filter" className="text-xs text-[#80766f] dark:text-[#b6aaa0]">Country</label>
                 <Select
                   inputId="country-filter"
                   instanceId="country-filter"
@@ -424,11 +525,7 @@ export default function CatalogueControls({
                   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" },
-                  })}
+                  theme={(theme) => selectTheme(theme, isDarkMode)}
                 />
                 {facetsError && (
                   <p role="alert" className="mt-2 text-sm text-red-700">
@@ -439,10 +536,10 @@ export default function CatalogueControls({
             )}
           </section>
 
-          <section className="border-b border-[#dedbd8]">
+          <section className="border-b border-[#dedbd8] dark:border-[#45413c]">
             <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]"
+              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] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#eee9e2]"
               aria-expanded={openSections.has("period")}
               onClick={() => toggleSection("period")}
             >
@@ -450,7 +547,7 @@ export default function CatalogueControls({
             </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>
+                <label htmlFor="artwork-period" className="text-xs text-[#80766f] dark:text-[#b6aaa0]">Made in</label>
                 <Select
                   inputId="artwork-period"
                   instanceId="artwork-period"
@@ -464,16 +561,12 @@ export default function CatalogueControls({
                   styles={{
                     menu: (base) => ({ ...base, zIndex: 10 }),
                   }}
-                  theme={(theme) => ({
-                    ...theme,
-                    borderRadius: 2,
-                    colors: { ...theme.colors, primary: "#80766f", primary25: "#f4f1ee", primary50: "#e8e3df", primary75: "#d8d0ca" },
-                  })}
+                  theme={(theme) => selectTheme(theme, isDarkMode)}
                 />
-                <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="mt-3 border-t border-[#eeeae7] pt-3 dark:border-[#45413c]">
+                  <p className="mb-2 text-xs text-[#80766f] dark:text-[#b6aaa0]">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]">
+                    <label className="grid min-w-0 gap-1.5 text-xs text-[#514943] dark:text-[#d3ccc3]">
                       <span className="flex items-center justify-between gap-2">
                         <span>From</span>
                         <input
@@ -489,11 +582,11 @@ export default function CatalogueControls({
                             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]"
+                          className="w-24 border border-[#d7d3d0] px-2 py-1.5 text-right text-sm text-[#292624] focus:outline-2 focus:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea]"
                         />
                       </span>
                     </label>
-                    <label className="grid min-w-0 gap-1.5 text-xs text-[#514943]">
+                    <label className="grid min-w-0 gap-1.5 text-xs text-[#514943] dark:text-[#d3ccc3]">
                       <span className="flex items-center justify-between gap-2">
                         <span>To</span>
                         <input
@@ -509,7 +602,7 @@ export default function CatalogueControls({
                             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]"
+                          className="w-24 border border-[#d7d3d0] px-2 py-1.5 text-right text-sm text-[#292624] focus:outline-2 focus:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea]"
                         />
                       </span>
                     </label>
@@ -559,7 +652,7 @@ export default function CatalogueControls({
                         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]"
+                      className="mt-3 w-full cursor-pointer border border-[#80766f] bg-[#80766f] px-3 py-2.5 text-sm text-white hover:bg-[#6f655f] dark:border-[#a99b8d] dark:bg-[#74685c] dark:hover:bg-[#847769]"
                     >
                       Apply date range
                     </button>
@@ -572,7 +665,7 @@ export default function CatalogueControls({
                         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]"
+                      className="mt-2 cursor-pointer border-0 bg-transparent p-0 text-xs text-[#80766f] underline underline-offset-2 hover:text-[#292624] dark:text-[#c0b5aa] dark:hover:text-white"
                     >
                       Clear date range
                     </button>
@@ -582,10 +675,10 @@ export default function CatalogueControls({
             )}
           </section>
 
-          <section className="border-b border-[#dedbd8]">
+          <section className="border-b border-[#dedbd8] dark:border-[#45413c]">
             <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]"
+              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] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#eee9e2]"
               aria-expanded={openSections.has("artists")}
               onClick={() => toggleSection("artists")}
             >
@@ -593,22 +686,12 @@ export default function CatalogueControls({
             </button>
             {openSections.has("artists") && (
               <div className="grid gap-2 pb-4 pt-0.5">
-                <label htmlFor="artist-filter" className="text-xs text-[#80766f]">Artist</label>
+                <label htmlFor="artist-filter" className="text-xs text-[#80766f] dark:text-[#b6aaa0]">Artist</label>
                 <Select
                   inputId="artist-filter"
                   instanceId="artist-filter"
                   className="w-full text-sm"
-                  theme={(theme) => ({
-                    ...theme,
-                    borderRadius: 2,
-                    colors: {
-                      ...theme.colors,
-                      primary: "#80766f",
-                      primary25: "#f4f1ee",
-                      primary50: "#e8e3df",
-                      primary75: "#d8d0ca",
-                    },
-                  })}
+                  theme={(theme) => selectTheme(theme, isDarkMode)}
                   options={toFacetOptions(facets.artists)}
                   value={selectedFacetOptions(selectedArtists, facets.artists)}
                   onChange={(options) => onArtistChange(options.map((option) => option.value))}
@@ -634,8 +717,8 @@ export default function CatalogueControls({
           </section>
         </div>
 
-        <div className="sticky bottom-0 -mx-5 mt-auto flex gap-3 border-t border-[#dedbd8] bg-white px-5 py-3 [padding-bottom:max(0.85rem,env(safe-area-inset-bottom))] lg:static lg:mx-0 lg:justify-between lg:border-0 lg:bg-transparent lg:px-0 lg:pb-0 lg:pt-4">
-          <button type="button" onClick={handleReset} className="flex-1 cursor-pointer border border-[#80766f] bg-transparent px-3 py-3 text-sm text-[#514943] hover:bg-[#f4f1ee] lg:flex-none">Clear all</button>
+        <div className="sticky bottom-0 -mx-5 mt-auto flex gap-3 border-t border-[#dedbd8] bg-white px-5 py-3 [padding-bottom:max(0.85rem,env(safe-area-inset-bottom))] dark:border-[#45413c] dark:bg-[#1d1c1a] lg:sticky lg:bottom-0 lg:mx-0 lg:justify-between lg:border-0 lg:bg-white lg:px-0 lg:pb-2 lg:pt-4 dark:lg:bg-[#1d1c1a]">
+          <button type="button" onClick={handleReset} className="flex-1 cursor-pointer border border-[#80766f] bg-transparent px-3 py-3 text-sm text-[#514943] hover:bg-[#f4f1ee] dark:border-[#8e857c] dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] lg:flex-none">Clear all</button>
           <button type="button" onClick={onToggleFilters} className="flex-1 cursor-pointer border border-[#80766f] bg-[#80766f] px-3 py-3 text-sm text-white hover:bg-[#6f655f] lg:hidden">Close filters</button>
         </div>
       </aside>
diff --git a/frontend/src/components/CreateGalleryModal.tsx b/frontend/src/components/CreateGalleryModal.tsx
index 1c2e6c3..bcbb283 100644
--- a/frontend/src/components/CreateGalleryModal.tsx
+++ b/frontend/src/components/CreateGalleryModal.tsx
@@ -71,7 +71,7 @@ export default function CreateGalleryModal({
 
   return (
     <div className="fixed inset-0 z-50 flex text-center items-center justify-center bg-black/50">
-      <div className="relative w-3/4 h-3/4 rounded-2xl bg-white p-8 shadow-xl">
+      <div className="relative w-3/4 h-3/4 rounded-2xl bg-white p-8 shadow-xl dark:bg-[#242321] dark:text-[#f3f0ea]">
         <button
           type="button"
           onClick={onClose}
@@ -95,7 +95,7 @@ export default function CreateGalleryModal({
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="Enter gallery title"
-          className="w-full rounded-lg border mt-10 border-gray-300 p-3 outline-none focus:border-blue-600"
+          className="w-full rounded-lg border mt-10 border-gray-300 p-3 outline-none focus:border-blue-600 dark:border-[#504b46] dark:bg-[#1d1c1a] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
         />
         <button
           type="button"
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index d91e785..a47f408 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="mt-auto flex min-h-16 items-center justify-center bg-[#808080] px-6 text-center text-xs text-white sm:min-h-[88px] sm:text-sm">
+    <footer className="mt-auto flex min-h-16 items-center justify-center bg-[#808080] px-6 text-center text-xs text-white dark:bg-[#242321] sm:min-h-[88px] sm:text-sm">
       <p>© {new Date().getFullYear()} Artex. All rights reserved</p>
     </footer>
   );
diff --git a/frontend/src/components/GalleryCard.tsx b/frontend/src/components/GalleryCard.tsx
index ea30e71..da2f4e0 100644
--- a/frontend/src/components/GalleryCard.tsx
+++ b/frontend/src/components/GalleryCard.tsx
@@ -19,8 +19,8 @@ export default function GalleryCard({
       className="block w-64 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700"
     >
       {imageUrls.length === 0 ? (
-        <div className="flex h-40 w-full items-center justify-center rounded-xl bg-gray-200">
-          <span className="text-gray-500">No image yet</span>
+        <div className="flex h-40 w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-[#302e2a]">
+          <span className="text-gray-500 dark:text-gray-400">No image yet</span>
         </div>
       ) : imageUrls.length === 1 ? (
         <img
@@ -63,7 +63,7 @@ export default function GalleryCard({
 
       <h2 className="mt-3 text-lg font-bold">{title}</h2>
 
-      <p className="text-sm text-gray-700">
+      <p className="text-sm text-gray-700 dark:text-gray-300">
         {artworkCount} {artworkCount === 1 ? "artwork" : "artworks"}
       </p>
     </Link>
diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
index fd50640..de4d10e 100644
--- a/frontend/src/components/Hero.tsx
+++ b/frontend/src/components/Hero.tsx
@@ -1,45 +1,109 @@
 import heroImageBack from "../assets/hero2.png";
 import heroImageFront from "../assets/hero1.png";
-import { CircleUserRound } from "lucide-react";
+import darkHeroImageBack from "../assets/hero4.jpg";
+import darkHeroImageFront from "../assets/hero3.jpg";
+import { ArrowDown, CircleUserRound } from "lucide-react";
 import { Link } from "react-router-dom";
 import { useAuthStore } from "../store/authStore";
+import { useThemeStore } from "../store/themeStore";
+import ThemeToggleButton from "./ThemeToggleButton";
 
-function Hero() {
+type HeroProps = {
+  onExploreClick: () => void;
+};
+
+function Hero({ onExploreClick }: HeroProps) {
   const isLoggedIn = useAuthStore((state) => Boolean(state.token));
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
 
   return (
-    <section className="relative mx-auto flex min-h-152 max-w-350 items-center justify-between gap-12 px-10 py-16 pt-30">
-      <Link
-        to={isLoggedIn ? "/profile" : "/login"}
-        aria-label={isLoggedIn ? "Open profile" : "Open login"}
-        className="absolute left-10 top-15 text-gray-300 hover:text-gray-500"
-      >
-        <CircleUserRound size={34} strokeWidth={1.5} />
-      </Link>
+    <section className="relative mx-auto -mt-14 flex min-h-[100svh] max-w-350 flex-col items-center gap-5 overflow-hidden px-6 pb-8 pt-[5.5rem] lg:mt-0 lg:min-h-152 lg:flex-row lg:justify-between lg:gap-12 lg:overflow-visible lg:px-10 lg:py-16 lg:pt-20">
+      <img
+        src={heroImageFront}
+        alt=""
+        aria-hidden="true"
+        className={`absolute inset-0 h-full w-full object-cover object-center transition-opacity duration-500 ease-in-out motion-reduce:transition-none lg:hidden ${isDarkMode ? "opacity-0" : "opacity-100"}`}
+      />
+      <img
+        src={darkHeroImageFront}
+        alt=""
+        aria-hidden="true"
+        className={`absolute inset-0 h-full w-full object-cover object-center transition-opacity duration-500 ease-in-out motion-reduce:transition-none lg:hidden ${isDarkMode ? "opacity-100" : "opacity-0"}`}
+      />
+      <div className="absolute inset-0 bg-gradient-to-b from-black/75 via-black/40 to-black/60 lg:hidden" aria-hidden="true" />
 
-      <div className="max-w-xl mx-auto translate-y-0 min-[1100px]:translate-y-30">
-        <h1 className="font-serif text-5xl sm:text-6xl leading-tight">Artex</h1>
+      <div className="relative z-10 mx-auto flex w-full max-w-xl flex-1 flex-col justify-center text-left min-[1100px]:translate-y-30 lg:flex-none">
+        <h1 className="w-full font-serif text-5xl leading-tight text-white sm:text-6xl lg:text-inherit">Artex</h1>
 
-        <p className="mt-8 font-serif text-base leading-7 text-gray-700 sm:text-lg sm:leading-8">
+        <p className="mt-8 font-serif text-base leading-7 text-white/90 sm:text-lg sm:leading-8 lg:text-gray-700 dark:lg:text-gray-300">
           Explore thousands of artworks in the Metropolitan Museum´s collection.
           From their renowned icons to lesser known works from every corner of
           the globe.
         </p>
+
+        <div className="mt-8 hidden w-full grid-cols-3 gap-2 sm:gap-3 lg:grid" aria-label="Explore Artex">
+          <Link
+            to={isLoggedIn ? "/profile" : "/login"}
+            aria-label={isLoggedIn ? "Open profile" : "Open login"}
+            className="flex min-h-20 flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
+          >
+            <CircleUserRound size={22} strokeWidth={1.5} aria-hidden="true" />
+            <span>{isLoggedIn ? "Profile" : "Log in"}</span>
+          </Link>
+
+          <ThemeToggleButton showLabel className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm" />
+
+          <button
+            type="button"
+            onClick={onExploreClick}
+            className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
+          >
+            <ArrowDown size={20} strokeWidth={1.5} aria-hidden="true" />
+            <span>Explore art</span>
+          </button>
+        </div>
       </div>
 
-      <div className="relative hidden min-h-88 w-full items-center justify-center min-[1000px]:flex min-[1000px]:flex-1 lg:min-h-136 lg:justify-end">
+      <div className="relative hidden min-h-88 w-full items-center justify-center lg:flex lg:min-h-136 lg:flex-1 lg:justify-end">
         <img
           src={heroImageBack}
           alt=""
-          className="absolute left-1/2 top-1/2 hidden w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-contain lg:block"
+          aria-hidden={isDarkMode}
+          className={`absolute left-1/2 top-1/2 hidden aspect-[1686/1377] w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-contain transition-opacity duration-500 ease-in-out motion-reduce:transition-none lg:block ${isDarkMode ? "opacity-0" : "opacity-100"}`}
+        />
+
+        <img
+          src={darkHeroImageBack}
+          alt=""
+          aria-hidden={!isDarkMode}
+          className={`absolute left-1/2 top-1/2 hidden aspect-[1686/1377] w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-cover transition-opacity duration-500 ease-in-out motion-reduce:transition-none lg:block ${isDarkMode ? "opacity-100" : "opacity-0"}`}
         />
 
         <img
           src={heroImageFront}
-          alt="Featured artwork"
-          className="absolute left-1/2 top-1/2 hidden w-[72%] max-w-xl -translate-x-1/2 -translate-y-1/2 object-contain min-[1000px]:block min-w-[320px]"
+          alt={isDarkMode ? "" : "Featured artwork"}
+          aria-hidden={isDarkMode}
+          className={`absolute left-1/2 top-1/2 hidden aspect-[843/1081] w-[72%] min-w-[320px] max-w-xl -translate-x-1/2 -translate-y-1/2 object-contain transition-opacity duration-500 ease-in-out motion-reduce:transition-none min-[1000px]:block ${isDarkMode ? "opacity-0" : "opacity-100"}`}
+        />
+
+        <img
+          src={darkHeroImageFront}
+          alt={isDarkMode ? "Featured artwork" : ""}
+          aria-hidden={!isDarkMode}
+          className={`absolute left-1/2 top-1/2 hidden aspect-[843/1081] w-[72%] min-w-[320px] max-w-xl -translate-x-1/2 -translate-y-1/2 object-cover transition-opacity duration-500 ease-in-out motion-reduce:transition-none min-[1000px]:block ${isDarkMode ? "opacity-100" : "opacity-0"}`}
         />
       </div>
+
+      <button
+        type="button"
+        onClick={onExploreClick}
+        aria-label="Scroll to filters"
+        className="relative z-10 mt-auto inline-flex shrink-0 animate-bounce items-center gap-2 rounded-full px-4 py-2 text-sm text-white transition-colors hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:animate-none lg:hidden"
+      >
+        <ArrowDown size={19} strokeWidth={1.6} aria-hidden="true" />
+        <span>Explore the collection</span>
+      </button>
+
     </section>
   );
 }
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 00c4237..dc20fc0 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -20,12 +20,12 @@ export default function Pagination({
         type="button"
         onClick={() => onPageChange(page - 1)}
         disabled={page === 1}
-        className="cursor-pointer rounded border border-gray-300 bg-white px-4 py-2 text-gray-900 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+        className="cursor-pointer rounded border border-gray-300 bg-white px-4 py-2 text-gray-900 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-[#504b46] dark:bg-[#242321] dark:text-gray-100 dark:hover:bg-[#35322e]"
       >
         Previous
       </button>
 
-      <span className="text-sm text-gray-700">
+      <span className="text-sm text-gray-700 dark:text-gray-300">
         Page {page} of {totalPages}
       </span>
 
@@ -33,7 +33,7 @@ export default function Pagination({
         type="button"
         onClick={() => onPageChange(page + 1)}
         disabled={page >= totalPages}
-        className="cursor-pointer rounded border border-gray-300 bg-white px-4 py-2 text-gray-900 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+        className="cursor-pointer rounded border border-gray-300 bg-white px-4 py-2 text-gray-900 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-[#504b46] dark:bg-[#242321] dark:text-gray-100 dark:hover:bg-[#35322e]"
       >
         Next
       </button>
diff --git a/frontend/src/components/ThemeToggleButton.tsx b/frontend/src/components/ThemeToggleButton.tsx
new file mode 100644
index 0000000..36dcde9
--- /dev/null
+++ b/frontend/src/components/ThemeToggleButton.tsx
@@ -0,0 +1,27 @@
+import { Moon, Sun } from "lucide-react";
+import { useThemeStore } from "../store/themeStore";
+
+type ThemeToggleButtonProps = {
+  className: string;
+  showLabel?: boolean;
+};
+
+export default function ThemeToggleButton({ className, showLabel = false }: ThemeToggleButtonProps) {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+  const label = isDarkMode ? "Switch to light theme" : "Switch to dark theme";
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={label}
+      aria-pressed={isDarkMode}
+      title={label}
+      className={className}
+    >
+      {isDarkMode ? <Sun size={22} strokeWidth={1.5} aria-hidden="true" /> : <Moon size={22} strokeWidth={1.5} aria-hidden="true" />}
+      {showLabel && <span>{isDarkMode ? "Light theme" : "Dark theme"}</span>}
+    </button>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5bfdd05..0c8a535 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,6 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --font-sans: "Montaga", serif;
 }
diff --git a/frontend/src/pages/ArtworkDetailPage.tsx b/frontend/src/pages/ArtworkDetailPage.tsx
index 26ee237..e090d9a 100644
--- a/frontend/src/pages/ArtworkDetailPage.tsx
+++ b/frontend/src/pages/ArtworkDetailPage.tsx
@@ -13,7 +13,6 @@ export default function ArtworkDetailPage() {
 
   const location = useLocation();
   const from = location.state?.from;
-  const scrollY = location.state?.scrollY;
 
   const backTo =
     typeof from === "string" && from.startsWith("/") && !from.startsWith("//")
@@ -47,8 +46,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"
+        className="absolute left-4 top-4 z-10 inline-flex items-center rounded-md border border-[#dedbd8] bg-white/90 px-4 py-2 text-sm text-[#514943] shadow-sm backdrop-blur transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321]/90 dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#b6aaa0]"
       >
         ← Back
       </Link>
@@ -65,13 +63,13 @@ export default function ArtworkDetailPage() {
               type="button"
               aria-label="Add artwork to gallery"
               onClick={() => setShowGalleryModal(true)}
-              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-300 text-2xl font-light text-gray-500 transition cursor-pointer hover:border-gray-500 hover:text-black"
+              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-300 text-2xl font-light text-gray-500 transition cursor-pointer hover:border-gray-500 hover:text-black dark:border-[#504b46] dark:text-gray-300 dark:hover:border-gray-400 dark:hover:text-white"
             >
               <span className="-translate-y-0.75">+</span>
             </button>
           </div>
 
-          <div className="mt-6 flex items-center gap-20 text-sm text-gray-500 sm:text-base">
+          <div className="mt-6 flex items-center gap-20 text-sm text-gray-500 dark:text-gray-400 sm:text-base">
             <p>{artist}</p>
 
             {artwork.date_display && (
@@ -82,39 +80,39 @@ export default function ArtworkDetailPage() {
           <section className="mt-16 hidden lg:block">
             <h2 className="font-serif text-3xl">Details</h2>
 
-            <div className="mt-4 border-t border-gray-300">
+            <div className="mt-4 border-t border-gray-300 dark:border-[#504b46]">
               {artwork.medium && (
                 <div className="grid grid-cols-[110px_1fr] gap-6 py-4">
                   <p className="font-medium">Medium</p>
-                  <p className="text-gray-500">{artwork.medium}</p>
+                  <p className="text-gray-500 dark:text-gray-400">{artwork.medium}</p>
                 </div>
               )}
 
               {place && (
                 <div className="grid grid-cols-[110px_1fr] gap-6 py-4">
                   <p className="font-medium">Place</p>
-                  <p className="text-gray-500">{place}</p>
+                  <p className="text-gray-500 dark:text-gray-400">{place}</p>
                 </div>
               )}
 
               {artwork.culture && (
                 <div className="grid grid-cols-[110px_1fr] gap-6 py-4">
                   <p className="font-medium">Culture</p>
-                  <p className="text-gray-500">{artwork.culture}</p>
+                  <p className="text-gray-500 dark:text-gray-400">{artwork.culture}</p>
                 </div>
               )}
 
               {artwork.period && (
                 <div className="grid grid-cols-[110px_1fr] gap-6 py-4">
                   <p className="font-medium">Period</p>
-                  <p className="text-gray-500">{artwork.period}</p>
+                  <p className="text-gray-500 dark:text-gray-400">{artwork.period}</p>
                 </div>
               )}
 
               {artwork.dimensions && (
                 <div className="grid grid-cols-[110px_1fr] gap-6 py-4">
                   <p className="font-medium">Dimensions</p>
-                  <p className="text-gray-500">{artwork.dimensions}</p>
+                  <p className="text-gray-500 dark:text-gray-400">{artwork.dimensions}</p>
                 </div>
               )}
             </div>
@@ -127,10 +125,10 @@ export default function ArtworkDetailPage() {
             <img
               src={artwork.image_url}
               alt={`${artwork.title} by ${artist}`}
-              className="h-auto max-h-107.5 w-full max-w-xl object-contain"
+              className="h-auto max-h-107.5 w-full max-w-xl bg-[#f5f4f1] object-contain dark:bg-[#302e2a]"
             />
           ) : (
-            <div className="flex aspect-4/3 w-full max-w-xl items-center justify-center bg-gray-100 text-gray-500">
+            <div className="flex aspect-4/3 w-full max-w-xl items-center justify-center bg-gray-100 text-gray-500 dark:bg-[#242321] dark:text-gray-400">
               Image unavailable
             </div>
           )}
@@ -141,39 +139,39 @@ export default function ArtworkDetailPage() {
       <section className="mt-16 lg:hidden">
         <h2 className="font-serif text-3xl">Details</h2>
 
-        <div className="mt-4 border-t border-gray-300">
+        <div className="mt-4 border-t border-gray-300 dark:border-[#504b46]">
           {artwork.medium && (
             <div className="grid grid-cols-[110px_1fr] gap-6 py-4 sm:grid-cols-[200px_1fr]">
               <p className="font-medium">Medium</p>
-              <p className="text-gray-500">{artwork.medium}</p>
+              <p className="text-gray-500 dark:text-gray-400">{artwork.medium}</p>
             </div>
           )}
 
           {place && (
             <div className="grid grid-cols-[110px_1fr] gap-6 py-4 sm:grid-cols-[200px_1fr]">
               <p className="font-medium">Place</p>
-              <p className="text-gray-500">{place}</p>
+              <p className="text-gray-500 dark:text-gray-400">{place}</p>
             </div>
           )}
 
           {artwork.culture && (
             <div className="grid grid-cols-[110px_1fr] gap-6 py-4 sm:grid-cols-[200px_1fr]">
               <p className="font-medium">Culture</p>
-              <p className="text-gray-500">{artwork.culture}</p>
+              <p className="text-gray-500 dark:text-gray-400">{artwork.culture}</p>
             </div>
           )}
 
           {artwork.period && (
             <div className="grid grid-cols-[110px_1fr] gap-6 py-4 sm:grid-cols-[200px_1fr]">
               <p className="font-medium">Period</p>
-              <p className="text-gray-500">{artwork.period}</p>
+              <p className="text-gray-500 dark:text-gray-400">{artwork.period}</p>
             </div>
           )}
 
           {artwork.dimensions && (
             <div className="grid grid-cols-[110px_1fr] gap-6 py-4 sm:grid-cols-[200px_1fr]">
               <p className="font-medium">Dimensions</p>
-              <p className="text-gray-500">{artwork.dimensions}</p>
+              <p className="text-gray-500 dark:text-gray-400">{artwork.dimensions}</p>
             </div>
           )}
         </div>
diff --git a/frontend/src/pages/CreateAccountPage.tsx b/frontend/src/pages/CreateAccountPage.tsx
index ba67638..3a72d14 100644
--- a/frontend/src/pages/CreateAccountPage.tsx
+++ b/frontend/src/pages/CreateAccountPage.tsx
@@ -110,7 +110,7 @@ export default function CreateAccount() {
   }
 
   return (
-    <main className="flex min-h-dvh">
+    <main className="flex min-h-dvh bg-white text-[#292624] dark:bg-[#171615] dark:text-[#f3f0ea]">
       <section
         aria-labelledby="create-account-heading"
         className="flex w-full items-center justify-center px-6 pb-10 pt-20 md:w-2/5 md:p-8"
@@ -118,7 +118,7 @@ export default function CreateAccount() {
         <div className="w-full max-w-sm">
           <Link
             to="/"
-            className="absolute left-4 top-4 z-10 p-2 hover:text-gray-500"
+            className="absolute left-4 top-4 z-10 inline-flex items-center rounded-md border border-[#dedbd8] bg-white/90 px-4 py-2 text-sm text-[#514943] shadow-sm backdrop-blur transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321]/90 dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#b6aaa0]"
           >
             ← Back
           </Link>
@@ -143,7 +143,7 @@ export default function CreateAccount() {
                 minLength={3}
                 maxLength={20}
                 required
-                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400"
+                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400 dark:bg-[#292724] dark:text-white dark:hover:bg-[#35322e] dark:focus:bg-[#292724]"
               />
             </div>
 
@@ -162,7 +162,7 @@ export default function CreateAccount() {
                 minLength={8}
                 maxLength={100}
                 required
-                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400"
+                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400 dark:bg-[#292724] dark:text-white dark:hover:bg-[#35322e] dark:focus:bg-[#292724]"
               />
             </div>
 
@@ -178,18 +178,18 @@ export default function CreateAccount() {
               <p
                 role="status"
                 aria-live="polite"
-                className="text-sm text-gray-700"
+                className="text-sm text-gray-700 dark:text-gray-300"
               >
                 {message}
               </p>
             )}
           </form>
 
-          <p className="mt-6 text-gray-500">
+          <p className="mt-6 text-gray-500 dark:text-gray-400">
             Already have an account?{" "}
             <Link
               to="/login"
-              className="text-gray-900 underline underline-offset-4 hover:text-gray-600"
+              className="text-gray-900 underline underline-offset-4 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300"
             >
               Login
             </Link>
diff --git a/frontend/src/pages/GalleryPage.tsx b/frontend/src/pages/GalleryPage.tsx
index 9e9d75e..da5c550 100644
--- a/frontend/src/pages/GalleryPage.tsx
+++ b/frontend/src/pages/GalleryPage.tsx
@@ -61,7 +61,7 @@ export default function GalleryPage() {
     <section className="relative w-full px-4 pb-12 pt-24 sm:px-8 lg:px-16">
       <Link
         to="/profile"
-        className="absolute left-4 top-4 inline-block p-2 text-gray-700 hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2"
+        className="absolute left-4 top-4 inline-flex items-center rounded-md border border-[#dedbd8] bg-white/90 px-4 py-2 text-sm text-[#514943] shadow-sm backdrop-blur transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321]/90 dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#b6aaa0]"
       >
         ← Back to profile
       </Link>
@@ -97,7 +97,7 @@ export default function GalleryPage() {
         <h1 className="mt-6 text-3xl">Gallery not found</h1>
       ) : (
         <div>
-          <header className="mb-8 flex flex-col gap-3 border-b border-gray-300 pb-6 sm:flex-row sm:items-end sm:justify-between sm:gap-8">
+          <header className="mb-8 flex flex-col gap-3 border-b border-gray-300 pb-6 dark:border-[#504b46] sm:flex-row sm:items-end sm:justify-between sm:gap-8">
             <h1 className="min-w-0 break-words font-serif text-4xl font-normal leading-tight sm:text-5xl">
               {gallery.title}
             </h1>
@@ -127,7 +127,7 @@ export default function GalleryPage() {
           )}
 
           {gallery.totalCount === 0 ? (
-            <p className="mt-8 text-gray-600">
+            <p className="mt-8 text-gray-600 dark:text-gray-400">
               This gallery has no artworks yet.
             </p>
           ) : (
@@ -135,6 +135,7 @@ export default function GalleryPage() {
               <div className="[&_.artwork-grid]:!mx-0">
                 <ArtworkGrid
                   artworks={gallery.artworks}
+                  showGalleryActions={false}
                   renderAction={
                     isEditing
                       ? (artwork) => (
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index b8f806d..f5c346d 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,12 +1,15 @@
 import { useState, useEffect, useRef } from "react";
-import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { CircleUserRound } from "lucide-react";
 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 ThemeToggleButton from "../components/ThemeToggleButton";
 import type { ArtworkSort } from "../types/ArtworkSort";
 import type { ArtworkPeriod } from "../types/ArtworkPeriod";
+import { useAuthStore } from "../store/authStore";
 
 const PAGE_SIZE = 12;
 const MIN_ARTWORK_YEAR = -8000;
@@ -45,7 +48,22 @@ export default function HomePage() {
   const [showLoading, setShowLoading] = useState(false);
   const [showFilters, setShowFilters] = useState(false);
   const [paginationVisible, setPaginationVisible] = useState(false);
+  const [galleryVisible, setGalleryVisible] = useState(false);
+  const catalogueRef = useRef<HTMLElement>(null);
   const paginationRef = useRef<HTMLDivElement>(null);
+  const artworkResultsRef = useRef<HTMLDivElement>(null);
+  const shouldScrollToPageRef = useRef(false);
+  const isLoggedIn = useAuthStore((state) => Boolean(state.token));
+
+  function handleExploreArtworks() {
+    const targetId = window.matchMedia("(min-width: 1024px)").matches
+      ? "catalogue-controls"
+      : "artwork-catalogue";
+    document.getElementById(targetId)?.scrollIntoView({
+      behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
+      block: "start",
+    });
+  }
 
   function updateQuery(values: Record<string, string | string[] | undefined>) {
     const next = new URLSearchParams(searchParams);
@@ -85,6 +103,18 @@ export default function HomePage() {
     };
   }, [loading]);
 
+  useEffect(() => {
+    const catalogue = catalogueRef.current;
+    if (!catalogue || typeof IntersectionObserver === "undefined") return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setGalleryVisible(entry.isIntersecting),
+      { threshold: 0.01 },
+    );
+    observer.observe(catalogue);
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const pagination = paginationRef.current;
     if (!pagination || typeof IntersectionObserver === "undefined") {
@@ -101,29 +131,37 @@ export default function HomePage() {
     return () => observer.disconnect();
   }, [totalCount, error]);
 
+  useEffect(() => {
+    if (!shouldScrollToPageRef.current) return;
+    shouldScrollToPageRef.current = false;
+
+    window.requestAnimationFrame(() => {
+      artworkResultsRef.current?.scrollIntoView({
+        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
+        block: "start",
+      });
+    });
+  }, [page]);
+
   // 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");
+    let returnScrollY: number | undefined;
+    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;
         }
-      } catch {
-      }
-    } else {
-      try {
         sessionStorage.removeItem("catalogue-return");
-      } catch {
       }
+    } catch {
+    }
+    if (typeof returnScrollY !== "number") {
+      returnScrollY = location.state?.restoreScrollY;
     }
 
     if (typeof returnScrollY !== "number") return;
@@ -199,6 +237,7 @@ export default function HomePage() {
 
   function handlePageChange(value: number) {
     setShowLoading(false);
+    shouldScrollToPageRef.current = value > page;
     setPage(value);
     updateQuery({ page: value === 1 ? undefined : String(value) });
   }
@@ -220,10 +259,22 @@ export default function HomePage() {
 
   return (
     <main>
-      <Hero />
+      <div className="sticky top-0 z-40 flex h-14 items-center justify-end gap-2 border-b border-white/25 bg-white/55 px-4 shadow-sm backdrop-blur-md dark:border-white/10 dark:bg-[#171615]/30 lg:hidden">
+        <Link
+          to={isLoggedIn ? "/profile" : "/login"}
+          aria-label={isLoggedIn ? "Open profile" : "Open login"}
+          className="grid h-10 w-10 place-items-center rounded-full text-[#514943] transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#e6dfd6] dark:hover:bg-white/10"
+        >
+          <CircleUserRound size={23} strokeWidth={1.5} aria-hidden="true" />
+        </Link>
+        <ThemeToggleButton className="grid h-10 w-10 cursor-pointer place-items-center rounded-full text-[#514943] transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#e6dfd6] dark:hover:bg-white/10" />
+      </div>
+      <Hero onExploreClick={handleExploreArtworks} />
 
       <section
-        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"
+        ref={catalogueRef}
+        id="artwork-catalogue"
+        className="mx-3 lg:mx-8 lg:grid lg:pt-36 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)"
@@ -257,17 +308,18 @@ export default function HomePage() {
           showFilters={showFilters}
           onToggleFilters={() => setShowFilters((current) => !current)}
           paginationVisible={paginationVisible}
+          galleryVisible={galleryVisible}
         />
-        <div className="min-h-6 text-sm text-gray-600 lg:col-start-2 lg:row-start-2">
+        <div className="min-h-6 text-sm text-gray-600 dark:text-gray-400 lg:col-start-2 lg:row-start-2">
           {error && <p role="alert">Error: {error}</p>}
           <p role="status">{loading && showLoading ? "Loading artworks..." : ""}</p>
         </div>
 
-        <div className="min-w-0 lg:col-start-2 lg:row-start-3 lg:[&_.artwork-grid]:!mx-0" aria-busy={loading}>
+        <div ref={artworkResultsRef} className="min-w-0 scroll-mt-6 lg:scroll-mt-24 lg:col-start-2 lg:row-start-3 lg:[&_.artwork-grid]:!mx-0" aria-busy={loading}>
           {!error && artworks.length > 0 && <ArtworkGrid artworks={artworks} />}
 
           {!loading && !error && artworks.length === 0 && (
-            <p className="my-8 text-gray-600">
+            <p className="my-8 text-gray-600 dark:text-gray-400">
               No artworks match your search and filters. Try changing your
               selections or use Clear all.
             </p>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 4c1c1b8..bbdda7c 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -73,7 +73,7 @@ function Login() {
   }
 
   return (
-    <main className="flex min-h-dvh">
+    <main className="flex min-h-dvh bg-white text-[#292624] dark:bg-[#171615] dark:text-[#f3f0ea]">
       <section
         aria-labelledby="login-heading"
         className="flex w-full items-center justify-center px-6 pb-10 pt-20 md:w-2/5 md:p-8"
@@ -81,7 +81,7 @@ function Login() {
         <div className="w-full max-w-sm">
           <Link
             to="/"
-            className="absolute left-4 top-4 z-10 p-2 hover:text-gray-500"
+            className="absolute left-4 top-4 z-10 inline-flex items-center rounded-md border border-[#dedbd8] bg-white/90 px-4 py-2 text-sm text-[#514943] shadow-sm backdrop-blur transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321]/90 dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#b6aaa0]"
           >
             ← Back
           </Link>
@@ -104,7 +104,7 @@ function Login() {
                 value={username}
                 onChange={(event) => setUsername(event.target.value)}
                 required
-                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400"
+                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400 dark:bg-[#292724] dark:text-white dark:hover:bg-[#35322e] dark:focus:bg-[#292724]"
               />
             </div>
 
@@ -121,7 +121,7 @@ function Login() {
                 value={password}
                 onChange={(event) => setPassword(event.target.value)}
                 required
-                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400"
+                className="w-full rounded-lg bg-gray-100 px-4 py-3 text-base text-black outline-none transition placeholder:text-gray-400 hover:bg-gray-200 focus:bg-white focus:ring-2 focus:ring-gray-400 dark:bg-[#292724] dark:text-white dark:hover:bg-[#35322e] dark:focus:bg-[#292724]"
               />
             </div>
 
@@ -137,18 +137,18 @@ function Login() {
               <p
                 role="status"
                 aria-live="polite"
-                className="text-sm text-gray-700"
+                className="text-sm text-gray-700 dark:text-gray-300"
               >
                 {message}
               </p>
             )}
           </form>
 
-          <p className="mt-6 text-gray-500">
+          <p className="mt-6 text-gray-500 dark:text-gray-400">
             Don't have an account?{" "}
             <Link
               to="/create-account"
-              className="text-gray-900 underline underline-offset-4 hover:text-gray-600"
+              className="text-gray-900 underline underline-offset-4 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300"
             >
               Create account
             </Link>
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 40286d7..03b8ad4 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -259,10 +259,10 @@ export default function ProfilePage() {
   }
 
   return (
-    <div className="profile">
+    <div className="profile min-h-dvh bg-white text-[#292624] dark:bg-[#171615] dark:text-[#f3f0ea]">
       <Link
         to="/"
-        className="absolute left-4 top-4 z-20 p-2 hover:text-gray-500"
+        className="absolute left-4 top-4 z-20 inline-flex items-center rounded-md border border-[#dedbd8] bg-white/90 px-4 py-2 text-sm text-[#514943] shadow-sm backdrop-blur transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321]/90 dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#b6aaa0]"
       >
         ← Back
       </Link>
@@ -270,7 +270,7 @@ export default function ProfilePage() {
       <button
         type="button"
         onClick={handleLogout}
-        className="absolute right-4 top-4 z-20 cursor-pointer p-2 hover:text-gray-500"
+        className="absolute right-4 top-4 z-20 cursor-pointer rounded-md border border-[#dedbd8] bg-white/90 px-4 py-2 text-sm text-[#514943] shadow-sm backdrop-blur transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321]/90 dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#b6aaa0]"
       >
         Log out
       </button>
@@ -295,7 +295,7 @@ export default function ProfilePage() {
 
         <label
           htmlFor="cover-image-input"
-          className="absolute bottom-4 right-4 z-20 cursor-pointer rounded-full bg-white px-4 py-2 text-sm text-gray-700 opacity-0 shadow-sm transition-opacity duration-200 group-hover:opacity-100 hover:bg-gray-100"
+          className="absolute bottom-4 right-4 z-20 cursor-pointer rounded-full bg-white px-4 py-2 text-sm text-gray-700 opacity-0 shadow-sm transition-opacity duration-200 group-hover:opacity-100 hover:bg-gray-100 dark:bg-[#242321] dark:text-gray-200 dark:hover:bg-[#35322e]"
         >
           Change
         </label>
@@ -309,7 +309,7 @@ export default function ProfilePage() {
         />
       </div>
       <div className="picture-and-username relative z-10 -mt-16 ml-20 flex items-center gap-6">
-        <label className="profile-pic group relative block h-44 w-44 shrink-0 cursor-pointer overflow-hidden rounded-full border-4 border-white bg-gray-300">
+        <label className="profile-pic group relative block h-44 w-44 shrink-0 cursor-pointer overflow-hidden rounded-full border-4 border-white bg-gray-300 dark:border-[#171615]">
           {isLoadingImages ? (
             <div className="h-full w-full animate-pulse rounded-full bg-gray-300" />
           ) : profileImage ? (
@@ -346,9 +346,10 @@ export default function ProfilePage() {
         <button
           type="button"
           onClick={() => setShowCreateGallery(true)}
-          className="rounded-full h-12 w-12 border-gray-200 border-2 flex items-center justify-center cursor-pointer hover:bg-gray-100"
+          aria-label="Create gallery"
+          className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border-2 border-gray-200 bg-white/90 transition-colors hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:hover:bg-[#302e2a]"
         >
-          <LucidePlus />
+          <LucidePlus aria-hidden="true" />
         </button>
       </div>
       {showCreateGallery && (
@@ -361,7 +362,7 @@ export default function ProfilePage() {
         {isLoading ? (
           <p>Loading galleries...</p>
         ) : galleries.length === 0 ? (
-          <p className="text-gray-500">No galleries created</p>
+          <p className="text-gray-500 dark:text-gray-400">No galleries created</p>
         ) : (
           <div className="flex flex-wrap gap-6">
             {galleries.map((gallery) => (
diff --git a/frontend/src/store/themeStore.ts b/frontend/src/store/themeStore.ts
new file mode 100644
index 0000000..aea1756
--- /dev/null
+++ b/frontend/src/store/themeStore.ts
@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+type ThemeState = {
+  isDarkMode: boolean;
+  toggleTheme: () => void;
+};
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      isDarkMode: false,
+      toggleTheme: () => set((state) => ({ isDarkMode: !state.isDarkMode })),
+    }),
+    {
+      name: "artex-theme",
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({ isDarkMode: state.isDarkMode }),
+    },
+  ),
+);