diff --git a/frontend/src/api/parts.ts b/frontend/src/api/parts.ts
index 8a91da0..4a1a0c4 100644
--- a/frontend/src/api/parts.ts
+++ b/frontend/src/api/parts.ts
@@ -15,7 +15,6 @@ type ApiPart = {
 export type PartsOptions = {
   search?: string;
   category?: PcPart["category"];
-  manufacturers?: string[];
   sortBy?: "NAME" | "PRICE" | "MANUFACTURER" | "CATEGORY";
   sortDirection?: "ASC" | "DESC";
   first?: number;
@@ -35,7 +34,6 @@ export async function getParts(
   {
     search = "",
     category,
-    manufacturers,
     sortBy = "NAME",
     sortDirection = "ASC",
     first = 20,
@@ -52,7 +50,6 @@ export async function getParts(
         query GetParts(
           $search: String
           $category: Category
-          $manufacturers: [String!]
           $sortBy: SortField!
           $sortDirection: SortDirection!
           $first: Int!
@@ -63,7 +60,6 @@ export async function getParts(
             after: $after
             search: $search
             category: $category
-            manufacturers: $manufacturers
             sortBy: $sortBy
             sortDirection: $sortDirection
            
@@ -89,7 +85,6 @@ export async function getParts(
       variables: {
         search: search.trim() || null,
         category: category ?? null,
-        manufacturers: manufacturers?.length ? manufacturers : null,
         sortBy,
         sortDirection,
         first,
diff --git a/frontend/src/components/AllPartsPreview.tsx b/frontend/src/components/AllPartsPreview.tsx
index b9ffd86..21b531d 100644
--- a/frontend/src/components/AllPartsPreview.tsx
+++ b/frontend/src/components/AllPartsPreview.tsx
@@ -1,5 +1,6 @@
 import { useParts } from "@/hooks/useParts";
 import PcPartCard from "@/components/PcPartCard";
+import PcPartCardSkeleton from "@/components/PcPartCardSkeleton";
 import ViewSelector, { type ViewType } from "@/components/ViewSelector";
 import type { PcPart } from "@/types/types";
 import type { PartsOptions } from "@/api/parts";
@@ -114,6 +115,12 @@ function PartsResults({
   const visibleParts = loading
     ? [...lastResult.allParts, ...lastResult.parts]
     : [...allParts, ...parts];
+  const showSkeletons =
+    loading && (visibleParts.length === 0 || Boolean(pagination.after));
+  const skeletonCount = Math.min(
+    first,
+    viewType === "4-grid-view" ? 8 : viewType === "2-grid-view" ? 4 : 2,
+  );
 
   const handleLoadMore = useCallback(() => {
     const cursor = pageInfo?.endCursor;
@@ -198,6 +205,10 @@ function PartsResults({
             onShowDetails={handleShowDetails}
           />
         ))}
+        {showSkeletons &&
+          Array.from({ length: skeletonCount }, (_, index) => (
+            <PcPartCardSkeleton key={`skeleton-${index}`} />
+          ))}
       </div>
 
       <dialog
@@ -241,7 +252,11 @@ function PartsResults({
           ))}
       </dialog>
 
-      {loading && <p role="status">Loading parts...</p>}
+      {loading && (
+        <p role="status" className={showSkeletons ? "sr-only" : "mt-3"}>
+          Loading parts...
+        </p>
+      )}
       {error && <p role="alert">{error}</p>}
 
       {!loading && !error && visibleParts.length === 0 && (
diff --git a/frontend/src/components/CategorySelection.tsx b/frontend/src/components/CategorySelection.tsx
new file mode 100644
index 0000000..1df2333
--- /dev/null
+++ b/frontend/src/components/CategorySelection.tsx
@@ -0,0 +1,79 @@
+import { Link } from "react-router";
+import { categories } from "@/types/categories";
+import {
+  CircuitBoard,
+  Cpu,
+  Fan,
+  Gpu,
+  HardDrive,
+  MemoryStick,
+  PcCase,
+  Plug,
+  type LucideIcon,
+} from "lucide-react";
+import type { PcPart } from "@/types/types";
+
+const categoryIcons: Record<PcPart["category"], LucideIcon> = {
+  GPU: Gpu,
+  CPU: Cpu,
+  RAM: MemoryStick,
+  Storage: HardDrive,
+  PSU: Plug,
+  PCCase: PcCase,
+  CPUCooler: Fan,
+  Motherboard: CircuitBoard,
+};
+
+type CategorySelectionProps = {
+  showViewAll?: boolean;
+};
+
+export default function CategorySelection({
+  showViewAll = true,
+}: CategorySelectionProps) {
+  return (
+    <section className="mx-auto w-[90%] max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
+      <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
+        <div className="w-full text-center lg:w-auto lg:text-left">
+          <h2 className="text-2xl lg:text-xl lg:font-bold">
+            Explore components
+          </h2>
+          <p className="mt-1 hidden text-sm text-secondary lg:block">
+            Find every part of your next build.
+          </p>
+        </div>
+
+        {showViewAll && (
+          <Link
+            to="/explore"
+            className="hidden text-sm text-accent hover:underline lg:block"
+          >
+            View all components →
+          </Link>
+        )}
+      </div>
+
+      <ul className="grid grid-cols-3 gap-3 lg:grid-cols-8">
+        {categories.map((category) => {
+          const Icon = categoryIcons[category.value];
+          return (
+            <li key={category.value}>
+              <Link
+                to={`/explore/category/${encodeURIComponent(category.value)}`}
+                className="flex min-h-24 flex-col items-center justify-center gap-2 rounded-xl bg-surface p-2 text-center text-sm hover:brightness-110"
+              >
+                <Icon
+                  aria-hidden="true"
+                  size={28}
+                  strokeWidth={1.75}
+                  className="shrink-0 text-accent"
+                />
+                {category.label}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
diff --git a/frontend/src/components/FilterComponent.tsx b/frontend/src/components/FilterComponent.tsx
index 04deefb..8efd99a 100644
--- a/frontend/src/components/FilterComponent.tsx
+++ b/frontend/src/components/FilterComponent.tsx
@@ -3,8 +3,9 @@ import type { Dispatch, SetStateAction } from "react";
 import type { PartsOptions } from "@/api/parts";
 import { categories } from "@/types/categories";
 import Button from "./buttons/Button";
+import SearchComponent from "./SearchComponent";
 
-// Sort and both filters sit inline only when there is room next to the search field.
+// Sort and category controls sit inline when there is room next to the search field.
 const DESKTOP_FILTER_WIDTH = 1200;
 
 type FilterComponentProps = {
@@ -49,14 +50,7 @@ export default function FilterComponent({
       aria-label="Search and filter components"
       className={`w-[90%] max-w-6xl text-white flex justify-center ${isDesktopSize ? "border border-gray-600 rounded-2xl bg-surface-dark p-2" : ""} items-center h-fit gap-2`}
     >
-      <input
-        type="search"
-        aria-label="Search components"
-        placeholder="Search components..."
-        value={search}
-        onChange={(event) => setSearch(event.target.value)}
-        className="min-w-0 flex-1 rounded-xl bg-surface px-4 py-3 placeholder:text-gray-300"
-      />
+      <SearchComponent value={search} onChange={setSearch} variant="light" />
       {isDesktopSize ? (
         <>
           <form
@@ -110,23 +104,6 @@ export default function FilterComponent({
               </select>
             </label>
 
-            <label className="flex items-center gap-2 h-full">
-              Manufacturer
-              <input
-                type="text"
-                className="h-full rounded-lg border border-gray-500 p-2 placeholder:text-gray-300"
-                placeholder="e.g. MSI"
-                value={filtOptions.manufacturers?.[0] ?? ""}
-                onChange={(event) =>
-                  updateFilters({
-                    manufacturers: event.target.value
-                      ? [event.target.value]
-                      : [],
-                  })
-                }
-              />
-            </label>
-
             <button
               type="button"
               aria-label="Reset filters"
@@ -152,46 +129,38 @@ export default function FilterComponent({
           <dialog
             ref={dialogRef}
             aria-labelledby="filter-title"
-            className="m-auto max-h-[90vh] w-[90%] max-w-sm overflow-y-auto rounded-3xl bg-surface p-6 text-white backdrop:bg-black/50"
+            className="m-auto max-h-[90dvh] w-[calc(100%-2rem)] max-w-sm overflow-y-auto rounded-2xl border border-gray-600 bg-surface-dark p-5 text-white shadow-2xl backdrop:bg-black/60 sm:p-6"
             onClick={(event) => {
               if (event.target === event.currentTarget)
                 dialogRef.current?.close();
             }}
           >
             <form
-              className="flex min-h-[28rem] flex-col gap-6"
+              className="flex flex-col gap-5"
               onSubmit={(event) => {
                 event.preventDefault();
                 setFiltOptions(draft);
                 dialogRef.current?.close();
               }}
             >
-              <header className="flex items-center justify-between">
-                <button
-                  type="button"
-                  aria-label="Reset filters"
-                  className="cursor-pointer text-sm underline"
-                  onClick={() => setDraft({ category: defaultCategory })}
-                >
-                  Reset
-                </button>
-                <h2 id="filter-title" className="text-2xl">
-                  Filter
+              <header className="flex items-center justify-between border-b border-gray-600 pb-3">
+                <h2 id="filter-title" className="text-xl font-semibold">
+                  Filters
                 </h2>
                 <button
                   type="button"
                   aria-label="Close filters"
-                  className="cursor-pointer text-3xl"
+                  className="flex size-11 cursor-pointer items-center justify-center rounded-lg text-2xl text-gray-300 transition-colors hover:bg-surface hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                   onClick={() => dialogRef.current?.close()}
                 >
                   ×
                 </button>
               </header>
 
-              <label className="flex flex-col gap-2">
+              <label className="flex flex-col gap-2 text-sm font-medium">
                 Sort by
                 <select
-                  className="rounded-lg border border-gray-400 bg-surface p-2"
+                  className="min-h-11 w-full rounded-lg border border-gray-500 bg-surface px-3 py-2 text-base font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                   value={
                     draft.sortBy === "PRICE"
                       ? (draft.sortDirection ?? "ASC")
@@ -211,10 +180,10 @@ export default function FilterComponent({
                 </select>
               </label>
 
-              <label className="flex flex-col gap-2">
+              <label className="flex flex-col gap-2 text-sm font-medium">
                 Category
                 <select
-                  className="rounded-lg border border-gray-400 bg-surface p-2"
+                  className="min-h-11 w-full rounded-lg border border-gray-500 bg-surface px-3 py-2 text-base font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                   value={draft.category ?? ""}
                   onChange={(event) =>
                     updateFilters({
@@ -233,26 +202,20 @@ export default function FilterComponent({
                 </select>
               </label>
 
-              <label className="flex flex-col gap-2">
-                Manufacturer
-                <input
-                  type="text"
-                  className="rounded-lg border border-gray-400 p-2 placeholder:text-gray-300"
-                  placeholder="e.g. MSI"
-                  value={draft.manufacturers?.[0] ?? ""}
-                  onChange={(event) =>
-                    updateFilters({
-                      manufacturers: event.target.value
-                        ? [event.target.value]
-                        : [],
-                    })
-                  }
-                />
-              </label>
-
-              <div className="pt-10">
-                <Button type="submit" className="py-3 ">
-                  Use filter
+              <div className="mt-1 flex items-center gap-4 border-t border-gray-600 pt-4">
+                <button
+                  type="button"
+                  aria-label="Reset filters"
+                  className="min-h-11 cursor-pointer rounded-lg px-3 text-sm underline underline-offset-4 hover:text-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                  onClick={() => setDraft({ category: defaultCategory })}
+                >
+                  Reset
+                </button>
+                <Button
+                  type="submit"
+                  className="min-h-11 flex-1 py-3 font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                >
+                  Apply filters
                 </Button>
               </div>
             </form>
diff --git a/frontend/src/components/PcPartCard.tsx b/frontend/src/components/PcPartCard.tsx
index 622b2b2..7432a86 100644
--- a/frontend/src/components/PcPartCard.tsx
+++ b/frontend/src/components/PcPartCard.tsx
@@ -3,6 +3,7 @@ import type { PcPart } from "@/types/types";
 import { getPartSpecifications } from "@/api/parts";
 import AddToBuildButton from "./buttons/AddToBuildButton";
 import Button from "@/components/buttons/Button";
+import PcPartCardLayout from "./PcPartCardLayout";
 
 export default function PcPartCard({
   part,
@@ -62,52 +63,46 @@ export default function PcPartCard({
   }
 
   return (
-    <>
-      {/* The card layout follows the width of its grid cell, not the screen. */}
-      <div className="@container min-w-0">
-        <article className="flex w-full min-w-0 flex-col overflow-hidden rounded-xl bg-surface text-white @md:flex-row">
-          {imageUrl && imageUrl !== failedImage ? (
-            <img
-              src={imageUrl}
-              alt={part.name}
-              loading="lazy"
-              draggable={false}
-              className="h-36 w-full bg-white object-contain p-3 @md:h-auto @md:min-h-36 @md:w-44 @md:shrink-0"
-              onError={() => setFailedImage(imageUrl)}
-            />
-          ) : (
-            <p className="flex h-36 w-full items-center justify-center bg-white text-xs text-gray-500 @md:h-auto @md:min-h-36 @md:w-44 @md:shrink-0">
-              Image unavailable
-            </p>
-          )}
-
-          <div className="flex min-w-0 flex-1 flex-col gap-1 p-2">
-            <h2 className="truncate text-sm" title={part.name}>
-              {part.name}
-            </h2>
-            <p className="text-xs text-gray-200">{part.category}</p>
-            <p className="mb-1 text-xl">
-              {part.price_eur === null
-                ? "Price unavailable"
-                : `€ ${part.price_eur.toFixed(2)}`}
-            </p>
-            <Button
-              type="button"
-              className="truncate hover:bg-accent/20 hover:text-accent mb-2"
-              onClick={handleShowDetails}
-              disabled={loadingDetails}
-            >
-              {loadingDetails ? "Loading details..." : "Show details"}
-            </Button>
-            {detailError && <p role="alert">{detailError}</p>}
-            {/* Reuse specifications loaded by Show details when adding to a build. */}
-            <AddToBuildButton
-              part={completePart}
-              className="hover:bg-accent/20 hover:text-accent"
-            />
-          </div>
-        </article>
-      </div>
-    </>
+    <PcPartCardLayout
+      image={
+        imageUrl && imageUrl !== failedImage ? (
+          <img
+            src={imageUrl}
+            alt={part.name}
+            loading="lazy"
+            draggable={false}
+            className="absolute inset-0 h-full w-full object-contain p-3"
+            onError={() => setFailedImage(imageUrl)}
+          />
+        ) : (
+          <p className="text-xs text-gray-500">Image unavailable</p>
+        )
+      }
+      name={part.name}
+      nameTitle={part.name}
+      category={part.category}
+      price={
+        part.price_eur === null
+          ? "Price unavailable"
+          : `€ ${part.price_eur.toFixed(2)}`
+      }
+      detailsAction={
+        <Button
+          type="button"
+          className="truncate hover:bg-accent/20 hover:text-accent"
+          onClick={handleShowDetails}
+          disabled={loadingDetails}
+        >
+          {loadingDetails ? "Loading details..." : "Show details"}
+        </Button>
+      }
+      error={detailError && <p role="alert">{detailError}</p>}
+      buildAction={
+        <AddToBuildButton
+          part={completePart}
+          className="hover:bg-accent/20 hover:text-accent"
+        />
+      }
+    />
   );
 }
diff --git a/frontend/src/components/PcPartCardLayout.tsx b/frontend/src/components/PcPartCardLayout.tsx
new file mode 100644
index 0000000..2abc8f9
--- /dev/null
+++ b/frontend/src/components/PcPartCardLayout.tsx
@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+
+type PcPartCardLayoutProps = {
+  image: ReactNode;
+  name: ReactNode;
+  nameTitle?: string;
+  category: ReactNode;
+  price: ReactNode;
+  detailsAction: ReactNode;
+  buildAction: ReactNode;
+  error?: ReactNode;
+  skeleton?: boolean;
+};
+//Layot for the PcPartCard and the PcPartCardSkeleton. 
+export default function PcPartCardLayout({
+  image,
+  name,
+  nameTitle,
+  category,
+  price,
+  detailsAction,
+  buildAction,
+  error,
+  skeleton = false,
+}: PcPartCardLayoutProps) {
+  return (
+    <div
+      aria-hidden={skeleton ? true : undefined}
+      className="@container min-w-0"
+    >
+      <article
+        className={`flex w-full min-w-0 flex-col overflow-hidden rounded-xl bg-surface text-white @md:flex-row ${skeleton ? "motion-safe:animate-pulse" : ""}`}
+      >
+        <div
+          className={`relative flex h-36 w-full items-center justify-center @md:h-auto @md:min-h-36 @md:w-44 @md:shrink-0 ${skeleton ? "bg-white/15" : "bg-white"}`}
+        >
+          {image}
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col gap-1 p-2">
+          <h2 className="min-h-5 truncate text-sm" title={nameTitle}>
+            {name}
+          </h2>
+          <p className="min-h-4 text-xs text-gray-200">{category}</p>
+          <p className="mb-1 min-h-7 text-xl">{price}</p>
+          <div className="mb-2">{detailsAction}</div>
+          {error}
+          {buildAction}
+        </div>
+      </article>
+    </div>
+  );
+}
diff --git a/frontend/src/components/PcPartCardSkeleton.tsx b/frontend/src/components/PcPartCardSkeleton.tsx
new file mode 100644
index 0000000..5844db6
--- /dev/null
+++ b/frontend/src/components/PcPartCardSkeleton.tsx
@@ -0,0 +1,21 @@
+import PcPartCardLayout from "./PcPartCardLayout";
+
+export default function PcPartCardSkeleton() {
+  const actionPlaceholder = (
+    <div className="rounded-lg bg-white/15 px-2 py-1.5 text-sm">
+      <span className="invisible">Loading</span>
+    </div>
+  );
+
+  return (
+    <PcPartCardLayout
+      skeleton
+      image={null}
+      name={<span className="inline-block h-3 w-4/5 rounded bg-white/20" />}
+      category={<span className="inline-block h-2 w-1/3 rounded bg-white/10" />}
+      price={<span className="inline-block h-5 w-24 rounded bg-white/20" />}
+      detailsAction={actionPlaceholder}
+      buildAction={actionPlaceholder}
+    />
+  );
+}
diff --git a/frontend/src/components/SearchComponent.tsx b/frontend/src/components/SearchComponent.tsx
new file mode 100644
index 0000000..f8d559a
--- /dev/null
+++ b/frontend/src/components/SearchComponent.tsx
@@ -0,0 +1,57 @@
+import { useRef } from "react";
+import { Search, X } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+
+type SearchComponentProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  variant?: "default" | "light";
+  className?: string;
+};
+
+export default function SearchComponent({
+  value,
+  onChange,
+  placeholder = "Search components or manufacturers...",
+  label = "Search components",
+  variant = "default",
+  className,
+}: SearchComponentProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div
+      className={twMerge(
+        "flex w-full min-w-0 flex-1 items-center gap-2 rounded-lg px-3 py-2 focus-within:ring-2 focus-within:ring-accent",
+        variant === "light" ? "bg-surface" : "bg-background",
+        className,
+      )}
+    >
+      <Search aria-hidden="true" height={15} className="shrink-0" />
+      <input
+        ref={inputRef}
+        aria-label={label}
+        type="search"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        className="w-full min-w-0 bg-transparent focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
+      />
+      {value && (
+        <button
+          type="button"
+          aria-label="Clear search"
+          className="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded text-white hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-white"
+          onClick={() => {
+            onChange("");
+            inputRef.current?.focus();
+          }}
+        >
+          <X aria-hidden="true" size={16} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/buttons/AddToBuildButton.tsx b/frontend/src/components/buttons/AddToBuildButton.tsx
index 808cb11..8107348 100644
--- a/frontend/src/components/buttons/AddToBuildButton.tsx
+++ b/frontend/src/components/buttons/AddToBuildButton.tsx
@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import type { PcPart } from "@/types/types";
 import { useBuild } from "@/context/BuildContext";
-import { useNavigate } from "react-router";
 import { twMerge } from "tailwind-merge";
 import Button from "./Button";
 import AddToBuildFeedback from "../AddToBuildFeedback";
diff --git a/frontend/src/components/pageSections/Header.tsx b/frontend/src/components/pageSections/Header.tsx
index 621e11b..61f3153 100644
--- a/frontend/src/components/pageSections/Header.tsx
+++ b/frontend/src/components/pageSections/Header.tsx
@@ -1,7 +1,8 @@
 import { useState, type FormEvent } from "react";
 import { Link, NavLink, useNavigate } from "react-router";
-import { Menu, Search, X } from "lucide-react";
+import { Menu, X } from "lucide-react";
 import { useBuild } from "@/context/BuildContext";
+import SearchComponent from "@/components/SearchComponent";
 
 const navigation = [
   { to: "/", label: "Home" },
@@ -63,20 +64,9 @@ export default function NavBar({ onSearch }: NavBarProps) {
       <form
         role="search"
         onSubmit={handleSearch}
-        className="hidden lg:flex min-w-0 flex-1 self-center items-center gap-2 rounded-lg bg-background px-3 py-2 focus-within:ring-2 focus-within:ring-accent"
+        className="hidden lg:flex min-w-0 flex-1 self-center"
       >
-        <label htmlFor="header-search" className="sr-only">
-          Search components
-        </label>
-        <Search aria-hidden="true" height={15} className="shrink-0" />
-        <input
-          id="header-search"
-          type="search"
-          value={search}
-          onChange={(event) => setSearch(event.target.value)}
-          placeholder="Search components"
-          className="min-w-0 w-full focus:outline-none"
-        />
+        <SearchComponent value={search} onChange={setSearch} />
       </form>
 
       <Link
diff --git a/frontend/src/hooks/useParts.ts b/frontend/src/hooks/useParts.ts
index d93b5d0..0500331 100644
--- a/frontend/src/hooks/useParts.ts
+++ b/frontend/src/hooks/useParts.ts
@@ -18,7 +18,6 @@ const catalogueCache = new Map<
 export function useParts({
   search = "",
   category,
-  manufacturers,
   sortBy = "NAME",
   sortDirection = "ASC",
   first = 20,
@@ -31,7 +30,6 @@ export function useParts({
     // Include every filter and pagination option so only identical queries share data.
     search,
     category,
-    manufacturers: manufacturers ?? [],
     sortBy,
     sortDirection,
     first,
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2f1b6f0..8fcf3b8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -51,3 +51,7 @@ body {
     opacity: 1;
   }
 }
+
+input[type="search"]::-webkit-search-cancel-button {
+  display: none;
+}
diff --git a/frontend/src/pages/categoryPage/categoryPage.tsx b/frontend/src/pages/categoryPage/categoryPage.tsx
index ac4b77c..4ddd20c 100644
--- a/frontend/src/pages/categoryPage/categoryPage.tsx
+++ b/frontend/src/pages/categoryPage/categoryPage.tsx
@@ -2,9 +2,8 @@ import AllPartsPreview from "../../components/AllPartsPreview";
 import { categories } from "@/types/categories";
 import FilterComponent from "@/components/FilterComponent";
 import { useState } from "react";
-import { Link } from "react-router";
-import { ArrowLeft } from "lucide-react";
 import type { PartsOptions } from "@/api/parts";
+import CategorySelection from "@/components/CategorySelection";
 
 type CategoryPageProps = {
   category?: string;
@@ -26,14 +25,8 @@ export default function CategoryPage({
   );
 
   return (
-    <div className="flex min-h-screen flex-col items-center gap-5 py-6">
-      <Link
-        to="/"
-        className="flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm text-black hover:bg-accent/20 hover:text-accent"
-      >
-        <ArrowLeft size={18} aria-hidden="true" />
-        Back to home
-      </Link>
+    <div className="mx-auto flex min-h-screen w-[92%] max-w-7xl flex-col items-center gap-6 py-6">
+      <CategorySelection showViewAll={false} />
 
       <h1 className="text-2xl">
         {invalidCategory
diff --git a/frontend/src/pages/homePage/components/CategorySelection.tsx b/frontend/src/pages/homePage/components/CategorySelection.tsx
deleted file mode 100644
index d6dae1f..0000000
--- a/frontend/src/pages/homePage/components/CategorySelection.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Link } from "react-router";
-import { categories } from "@/types/categories";
-
-export default function CategorySelection() {
-  return (
-    <section className="mx-auto w-[90%] max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
-      <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
-        <div className="w-full text-center lg:w-auto lg:text-left">
-          <h2 className="text-2xl lg:text-xl lg:font-bold">
-            Explore components
-          </h2>
-          <p className="mt-1 hidden text-sm text-secondary lg:block">
-            Find every part of your next build.
-          </p>
-        </div>
-
-        <Link
-          to="/explore"
-          className="hidden text-sm text-accent hover:underline lg:block"
-        >
-          View all components →
-        </Link>
-      </div>
-
-      <ul className="grid grid-cols-3 gap-3 lg:grid-cols-8">
-        {categories.map((category) => (
-          <li key={category.value}>
-            <Link
-              to={`/explore/category/${encodeURIComponent(category.value)}`}
-              className="flex min-h-24 items-center justify-center rounded-xl bg-surface p-2 text-center text-sm hover:brightness-110"
-            >
-              {category.label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
diff --git a/frontend/src/pages/homePage/homePage.tsx b/frontend/src/pages/homePage/homePage.tsx
index ca1d905..d4eafbd 100644
--- a/frontend/src/pages/homePage/homePage.tsx
+++ b/frontend/src/pages/homePage/homePage.tsx
@@ -4,7 +4,7 @@ import AllPartsPreview from "../../components/AllPartsPreview";
 import type { PartsOptions } from "@/api/parts";
 import FilterComponent from "@/components/FilterComponent";
 import BuildPCGraphic from "./components/BuildPCGraphic";
-import CategorySelection from "./components/CategorySelection";
+import CategorySelection from "../../components/CategorySelection";
 
 export default function HomePage() {
   const [search, setSearch] = useState("");
diff --git a/frontend/src/test/AllPartsPreview.test.tsx b/frontend/src/test/AllPartsPreview.test.tsx
index 220ae56..05fa2d8 100644
--- a/frontend/src/test/AllPartsPreview.test.tsx
+++ b/frontend/src/test/AllPartsPreview.test.tsx
@@ -110,6 +110,44 @@ const mockParts = [
 // Test 1: Search with matching results
 // --------------------------------------------------
 
+it("shows loading placeholders, then replaces them with results", () => {
+  vi.mocked(useParts).mockReturnValue({
+    parts: [],
+    totalCount: 0,
+    pageInfo: undefined,
+    loading: true,
+    retry: vi.fn(),
+    error: null,
+  });
+
+  const { container, rerender } = render(
+    <AllPartsPreview first={2} featured />,
+  );
+  const grid = container.querySelector('[aria-busy="true"]')!;
+  expect(grid.children).toHaveLength(2);
+  expect(
+    Array.from(grid.children).every(
+      (child) => child.getAttribute("aria-hidden") === "true",
+    ),
+  ).toBe(true);
+  expect(screen.getByRole("status")).toHaveTextContent("Loading parts");
+  expect(screen.queryByText("No parts found.")).not.toBeInTheDocument();
+
+  vi.mocked(useParts).mockReturnValue({
+    parts: mockParts.slice(0, 2),
+    totalCount: 2,
+    pageInfo: { hasNextPage: false, endCursor: null },
+    loading: false,
+    retry: vi.fn(),
+    error: null,
+  });
+  rerender(<AllPartsPreview first={2} featured />);
+  expect(grid).toHaveAttribute("aria-busy", "false");
+  expect(grid.querySelector('[aria-hidden="true"]')).toBeNull();
+  expect(screen.getAllByTestId(/^part-/)).toHaveLength(2);
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+});
+
 it("displays matching search results", () => {
   vi.mocked(useParts).mockReturnValue({
     parts: mockParts.slice(0, 2),
@@ -285,6 +323,12 @@ it("loads the next page without duplicating previous results", () => {
   });
 
   // Check that the next page cursor is requested
+  expect(screen.getAllByTestId(/^part-/)).toHaveLength(2);
+  const loadingGrid = screen.getByTestId("part-1").parentElement!;
+  expect(loadingGrid).toHaveAttribute("aria-busy", "true");
+  expect(
+    loadingGrid.querySelectorAll(':scope > [aria-hidden="true"]'),
+  ).toHaveLength(2);
   expect(useParts).toHaveBeenCalledWith(
     expect.objectContaining({
       first: 2,
diff --git a/frontend/src/test/useParts.test.tsx b/frontend/src/test/useParts.test.tsx
index 2fcb8d4..2d7cead 100644
--- a/frontend/src/test/useParts.test.tsx
+++ b/frontend/src/test/useParts.test.tsx
@@ -208,7 +208,6 @@ it("retries a failed request with the same filters and pagination", async () =>
   const options: PartsOptions = {
     search: "RTX",
     category: "GPU",
-    manufacturers: ["NVIDIA"],
     sortBy: "PRICE",
     sortDirection: "DESC",
     first: 40,