diff --git a/src/components/shop/ProductCard.tsx b/src/components/shop/ProductCard.tsx
index b9899bd0..dec10234 100644
--- a/src/components/shop/ProductCard.tsx
+++ b/src/components/shop/ProductCard.tsx
@@ -150,7 +150,7 @@ export function ProductCard({
       className="
         group flex flex-col min-w-[340px] max-w-[400px] w-full rounded-xl
         border border-transparent bg-transparent
-        hover:bg-shop-bg-2 hover:border-shop-line-2
+        hover:bg-[#EFEFE3] dark:hover:bg-shop-bg-2 hover:border-shop-line-2
         transition-[border-color,background-color] duration-200
         px-[22px] pt-7 pb-5
       "
diff --git a/src/components/shop/ProductDrawer.tsx b/src/components/shop/ProductDrawer.tsx
index 4a8e2470..054c7b6d 100644
--- a/src/components/shop/ProductDrawer.tsx
+++ b/src/components/shop/ProductDrawer.tsx
@@ -145,18 +145,37 @@ export function ProductDrawer({
   const isOpen = !!productHandle
 
   // Keep the last-known handle alive through the exit animation so the drawer
-  // slides out with content visible (not empty). Cleared after 400ms — just
-  // past the 380ms transition — so the body unmounts cleanly after exit.
+  // slides out with content visible (not empty). Uses the derived-state pattern
+  // so displayHandle is updated synchronously on open (no empty-frame flash).
   const [displayHandle, setDisplayHandle] = React.useState<string | null>(null)
+  const [prevProductHandle, setPrevProductHandle] = React.useState<
+    string | null
+  >(null)
+  if (productHandle !== prevProductHandle) {
+    setPrevProductHandle(productHandle)
+    if (productHandle) setDisplayHandle(productHandle)
+  }
+
+  // Clear displayHandle after exit animation completes
   React.useEffect(() => {
-    if (productHandle) {
-      setDisplayHandle(productHandle)
-    } else {
+    if (!productHandle) {
       const t = setTimeout(() => setDisplayHandle(null), 400)
       return () => clearTimeout(t)
     }
   }, [productHandle])
 
+  // Pre-fetch product data so the drawer only animates open once content is ready,
+  // preventing the skeleton flash. Same query key as DrawerBody so cache is shared.
+  const { data: prefetchedProduct } = useQuery({
+    queryKey: ['shopify', 'product', displayHandle ?? ''],
+    queryFn: () => getProduct({ data: { handle: displayHandle! } }),
+    enabled: !!displayHandle,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  // Delay the open animation until data is in cache. Close animates immediately.
+  const isAnimatedOpen = isOpen && !!prefetchedProduct
+
   const effectiveWidth = width
 
   const navigateStep = React.useCallback(
@@ -222,11 +241,11 @@ export function ProductDrawer({
       <button
         type="button"
         aria-label="Close product drawer"
-        tabIndex={isOpen ? 0 : -1}
+        tabIndex={isAnimatedOpen ? 0 : -1}
         onClick={onClose}
         className={twMerge(
           'fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm transition-opacity duration-300',
-          isOpen
+          isAnimatedOpen
             ? 'opacity-100 pointer-events-auto'
             : 'opacity-0 pointer-events-none',
         )}
@@ -236,8 +255,8 @@ export function ProductDrawer({
       <aside
         ref={drawerRef}
         aria-label="Product detail"
-        aria-hidden={!isOpen}
-        style={{ width: isOpen ? effectiveWidth : undefined }}
+        aria-hidden={!isAnimatedOpen}
+        style={{ width: effectiveWidth }}
         className={twMerge(
           'fixed top-[48px] right-0 bottom-0 z-[70]',
           'border-l border-shop-line flex flex-col',
@@ -246,7 +265,7 @@ export function ProductDrawer({
           isDragging
             ? 'transition-none select-none'
             : 'transition-transform duration-[380ms] ease-[cubic-bezier(0.2,0.8,0.2,1)]',
-          isOpen ? 'translate-x-0' : 'translate-x-full',
+          isAnimatedOpen ? 'translate-x-0' : 'translate-x-full',
         )}
       >
         {/* Splitter handle */}
diff --git a/src/components/shop/ui/Select.tsx b/src/components/shop/ui/Select.tsx
index aa394960..50b63d00 100644
--- a/src/components/shop/ui/Select.tsx
+++ b/src/components/shop/ui/Select.tsx
@@ -1,27 +1,179 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 
-type Props = React.SelectHTMLAttributes<HTMLSelectElement>
-
-/** Styled native <select> with a carved-in chevron. */
-export const ShopSelect = React.forwardRef<HTMLSelectElement, Props>(
-  function ShopSelect({ className, children, ...rest }, ref) {
-    return (
-      <select
-        ref={ref}
-        {...rest}
+type OptionData = { value: string; label: string }
+
+type Props = {
+  value?: string
+  onChange?: (e: { target: { value: string } }) => void
+  className?: string
+  triggerClassName?: string
+  children?: React.ReactNode
+}
+
+function extractOptions(children: React.ReactNode): Array<OptionData> {
+  const options: Array<OptionData> = []
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child) || child.type !== 'option') return
+    const el = child as React.ReactElement<{
+      value?: string
+      children?: React.ReactNode
+    }>
+    const value = String(el.props.value ?? '')
+    const label =
+      typeof el.props.children === 'string'
+        ? el.props.children
+        : String(el.props.value ?? '')
+    options.push({ value, label })
+  })
+  return options
+}
+
+/** Custom themed dropdown. Keeps the same onChange API as a native <select>
+ * so all call-sites stay unchanged. */
+export function ShopSelect({
+  value,
+  onChange,
+  className,
+  triggerClassName,
+  children,
+}: Props) {
+  const [open, setOpen] = React.useState(false)
+  const [focused, setFocused] = React.useState<string | null>(null)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+  const menuRef = React.useRef<HTMLDivElement>(null)
+
+  const options = extractOptions(children)
+  const selected = options.find((o) => o.value === value)
+
+  // Close on outside click
+  React.useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !menuRef.current?.contains(e.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  // Keyboard navigation
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (!open) {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+        e.preventDefault()
+        setOpen(true)
+        setFocused(value ?? options[0]?.value ?? null)
+      }
+      return
+    }
+    const idx = options.findIndex((o) => o.value === focused)
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setFocused(options[Math.min(idx + 1, options.length - 1)]?.value ?? null)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setFocused(options[Math.max(idx - 1, 0)]?.value ?? null)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      if (focused) select(focused)
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+      triggerRef.current?.focus()
+    }
+  }
+
+  const select = (optValue: string) => {
+    onChange?.({ target: { value: optValue } })
+    setOpen(false)
+    triggerRef.current?.focus()
+  }
+
+  return (
+    <div className={twMerge('relative', className)} onKeyDown={onKeyDown}>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => {
+          setOpen((o) => !o)
+          if (!open) setFocused(value ?? options[0]?.value ?? null)
+        }}
         className={twMerge(
-          'appearance-none border border-shop-line-2 rounded-xl',
-          'py-2.5 pl-4 pr-8 bg-transparent text-shop-text-2 font-shop-mono text-shop-ui',
-          'bg-no-repeat bg-[right_12px_center]',
-          // inline SVG chevron, colored with the muted text token
-          "bg-[url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23a8a8b0' fill='none' stroke-width='1.4'/></svg>\")]",
-          'cursor-pointer transition-colors hover:border-shop-muted hover:text-shop-text',
-          className,
+          'flex items-center gap-2 border border-shop-line-2 rounded-xl',
+          'py-2.5 pl-4 pr-3 bg-transparent text-shop-text-2 font-shop-mono text-shop-ui',
+          'cursor-pointer transition-colors select-none whitespace-nowrap',
+          'hover:border-shop-muted hover:text-shop-text',
+          open && 'border-shop-muted text-shop-text',
+          triggerClassName,
         )}
       >
-        {children}
-      </select>
-    )
-  },
-)
+        {selected?.label ?? '—'}
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          aria-hidden
+          className={twMerge(
+            'transition-transform duration-150 shrink-0',
+            open && 'rotate-180',
+          )}
+        >
+          <path
+            d="M2 4l3 3 3-3"
+            stroke="currentColor"
+            fill="none"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+          />
+        </svg>
+      </button>
+
+      {open ? (
+        <div
+          ref={menuRef}
+          role="listbox"
+          className={twMerge(
+            'absolute right-0 top-[calc(100%+6px)] z-[200] min-w-full',
+            'bg-shop-panel border border-shop-line rounded-xl overflow-hidden',
+            'shadow-[0_8px_24px_-4px_rgba(0,0,0,0.18),0_2px_8px_-2px_rgba(0,0,0,0.12)]',
+          )}
+        >
+          {options.map((opt) => {
+            const isSelected = opt.value === value
+            const isFocused = opt.value === focused
+            return (
+              <button
+                key={opt.value}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                onMouseEnter={() => setFocused(opt.value)}
+                onClick={() => select(opt.value)}
+                className={twMerge(
+                  'w-full text-left px-4 py-2.5 font-shop-mono text-shop-ui whitespace-nowrap',
+                  'transition-colors duration-75 flex items-center gap-2',
+                  isSelected ? 'text-shop-accent' : 'text-shop-text-2',
+                  isFocused && 'bg-shop-surface text-shop-text',
+                )}
+              >
+                <span
+                  className={twMerge(
+                    'w-1.5 h-1.5 rounded-full shrink-0 transition-opacity',
+                    isSelected ? 'bg-shop-accent opacity-100' : 'opacity-0',
+                  )}
+                />
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/shop/ui/Tab.tsx b/src/components/shop/ui/Tab.tsx
index fc54165c..bc0f6dd8 100644
--- a/src/components/shop/ui/Tab.tsx
+++ b/src/components/shop/ui/Tab.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   isActive?: boolean
@@ -11,18 +12,18 @@ export const ShopTab = React.forwardRef<HTMLButtonElement, Props>(
     { isActive, count: _count, children, className, ...rest },
     ref,
   ) {
-    const base =
-      'inline-flex items-center px-4 py-2.5 rounded-xl font-shop-mono text-shop-ui transition-colors cursor-pointer'
-    const state = isActive
-      ? 'border-2 border-shop-muted font-medium text-shop-text'
-      : 'border border-shop-line-2 font-normal text-shop-text-2 hover:text-shop-text hover:border-shop-muted'
-
     return (
       <button
         ref={ref}
         type="button"
         {...rest}
-        className={`${base} ${state}${className ? ` ${className}` : ''}`}
+        className={twMerge(
+          'inline-flex items-center px-4 py-2.5 rounded-xl font-shop-mono text-shop-ui transition-colors cursor-pointer',
+          isActive
+            ? 'border-2 border-shop-muted font-medium text-shop-text'
+            : 'border border-shop-line-2 font-normal text-shop-text-2 hover:text-shop-text hover:border-shop-muted',
+          className,
+        )}
       >
         {children}
       </button>
diff --git a/src/routes/shop.index.tsx b/src/routes/shop.index.tsx
index 30ed18dd..77c872ab 100644
--- a/src/routes/shop.index.tsx
+++ b/src/routes/shop.index.tsx
@@ -124,97 +124,109 @@ function ShopIndex() {
       : allProducts.filter((p) => p.productType?.toLowerCase() === activeType)
 
   return (
-    <div className="p-6 md:p-11 pb-24 max-w-[1280px] mx-auto">
-      <div className="pb-5.5 border-b border-shop-line-2 mb-7">
-        <ShopHero
-          title={
-            <>
-              Built in <em>public</em>,<br />
-              worn in <em>production</em>.
-            </>
-          }
-          lede="Official TanStack apparel, accessories, and stickers. Limited runs, ethically produced, shipped worldwide. Rep the libraries that ship your code every day."
-        />
+    <div className="pb-24">
+      {/* Hero */}
+      <div className="px-6 md:px-11 pt-6 md:pt-11 max-w-[1280px] mx-auto">
+        <div className="pb-5.5 border-b border-shop-line-2 mb-7">
+          <ShopHero
+            title={
+              <>
+                Built in <em>public</em>,<br />
+                worn in <em>production</em>.
+              </>
+            }
+            lede="Official TanStack apparel, accessories, and stickers. Limited runs, ethically produced, shipped worldwide. Rep the libraries that ship your code every day."
+          />
+        </div>
       </div>
 
-      <div className="flex flex-wrap items-center gap-1.5 pb-4.5">
-        <ShopTab
-          isActive={activeType === 'all'}
-          count={allProducts.length}
-          onClick={() =>
-            navigate({
-              to: '/shop',
-              search: (prev) => ({ ...prev, type: undefined }),
-            })
-          }
-        >
-          All
-        </ShopTab>
-        {typeOptions.map((opt) => (
+      {/* Sticky filter + sort bar */}
+      <div className="sticky top-[var(--navbar-height,56px)] z-10 border-b border-shop-line bg-shop-bg/95 backdrop-blur-sm">
+        <div className="max-w-[1280px] mx-auto px-6 md:px-11 flex flex-wrap items-center gap-1.5 py-2">
           <ShopTab
-            key={opt.key}
-            isActive={activeType === opt.key}
-            count={opt.count}
+            isActive={activeType === 'all'}
+            count={allProducts.length}
+            className="px-3 py-1.5 text-shop-sm rounded-lg"
             onClick={() =>
               navigate({
                 to: '/shop',
-                search: (prev) => ({ ...prev, type: opt.key }),
+                search: (prev) => ({ ...prev, type: undefined }),
               })
             }
           >
-            {opt.display}
+            All
           </ShopTab>
-        ))}
-        <ShopSelect
-          className="ml-auto"
-          value={sortId}
-          onChange={(e) => {
-            const nextId = e.target.value as ValidSortId
-            navigate({
-              to: '/shop',
-              search: (prev) => ({
-                ...prev,
-                sort: nextId === 'BEST_SELLING' ? undefined : nextId,
-              }),
-            })
-          }}
-        >
-          {SORT_OPTIONS.map((opt) => (
-            <option key={sortOptionId(opt)} value={sortOptionId(opt)}>
-              {opt.label}
-            </option>
+          {typeOptions.map((opt) => (
+            <ShopTab
+              key={opt.key}
+              isActive={activeType === opt.key}
+              count={opt.count}
+              className="px-3 py-1.5 text-shop-sm rounded-lg"
+              onClick={() =>
+                navigate({
+                  to: '/shop',
+                  search: (prev) => ({ ...prev, type: opt.key }),
+                })
+              }
+            >
+              {opt.display}
+            </ShopTab>
           ))}
-        </ShopSelect>
+          <ShopSelect
+            className="ml-auto"
+            triggerClassName="py-1.5 pl-3 pr-2.5 text-shop-sm rounded-lg"
+            value={sortId}
+            onChange={(e) => {
+              const nextId = e.target.value as ValidSortId
+              navigate({
+                to: '/shop',
+                search: (prev) => ({
+                  ...prev,
+                  sort: nextId === 'BEST_SELLING' ? undefined : nextId,
+                }),
+              })
+            }}
+          >
+            {SORT_OPTIONS.map((opt) => (
+              <option key={sortOptionId(opt)} value={sortOptionId(opt)}>
+                {opt.label}
+              </option>
+            ))}
+          </ShopSelect>
+        </div>
       </div>
 
-      {products.length === 0 ? (
-        <div className="text-center py-24 text-shop-muted">
-          No products yet. Check back soon!
-        </div>
-      ) : (
-        <>
-          <section className="grid gap-x-4 gap-y-5.5 grid-cols-[repeat(auto-fill,minmax(340px,1fr))]">
-            {products.map((product, i) => (
-              <ProductCard
-                key={product.id}
-                product={product}
-                loading={i < 8 ? 'eager' : 'lazy'}
-                onQuickView={setDrawerHandle}
-              />
-            ))}
-          </section>
-          {hasNextPage ? (
-            <div className="flex justify-center py-8">
-              <ShopButton
-                onClick={() => loadMore.mutate()}
-                disabled={loadMore.isPending}
-              >
-                {loadMore.isPending ? 'Loading…' : 'Load more'}
-              </ShopButton>
-            </div>
-          ) : null}
-        </>
-      )}
+      {/* Product grid */}
+      <div className="px-6 md:px-11 max-w-[1280px] mx-auto mt-7">
+        {products.length === 0 ? (
+          <div className="text-center py-24 text-shop-muted">
+            No products yet. Check back soon!
+          </div>
+        ) : (
+          <>
+            <section className="grid gap-x-4 gap-y-5.5 grid-cols-[repeat(auto-fill,minmax(340px,1fr))]">
+              {products.map((product, i) => (
+                <ProductCard
+                  key={product.id}
+                  product={product}
+                  loading={i < 8 ? 'eager' : 'lazy'}
+                  onQuickView={setDrawerHandle}
+                />
+              ))}
+            </section>
+            {hasNextPage ? (
+              <div className="flex justify-center py-8">
+                <ShopButton
+                  onClick={() => loadMore.mutate()}
+                  disabled={loadMore.isPending}
+                >
+                  {loadMore.isPending ? 'Loading…' : 'Load more'}
+                </ShopButton>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
 
       <ProductDrawer
         productHandle={drawerHandle}