diff --git a/app/products/[handle]/page.tsx b/app/products/[handle]/page.tsx
index a8853bbb01..bfb66a2a1e 100644
--- a/app/products/[handle]/page.tsx
+++ b/app/products/[handle]/page.tsx
@@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
+        <div className="rounded-lg border border-neutral-900 p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
           <div className="lg:col-span-3 flex justify-center">
             <Gallery
               images={product.images.map((image: Image) => ({
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 903e14e21c..971e79a2bf 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -126,7 +126,7 @@ export function VariantSelector({
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
-                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
+                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-777 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
                 {
                   'cursor-default ring-2 ring-gray-600': isActive,
                   'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-gray-600 ':