diff --git a/src/app/(checkout)/checkout/[storeId]/loading.tsx b/src/app/(checkout)/checkout/[storeId]/loading.tsx
index 60d069142..0db7e25b3 100644
--- a/src/app/(checkout)/checkout/[storeId]/loading.tsx
+++ b/src/app/(checkout)/checkout/[storeId]/loading.tsx
@@ -7,7 +7,7 @@ export default function CheckoutLoading() {
   return (
     <section className="relative flex h-full min-h-dvh flex-col items-start justify-center lg:h-dvh lg:flex-row lg:overflow-hidden">
       <div className="w-full space-y-12 pt-8 lg:pt-16">
-        <div className="fixed top-0 z-40 h-16 w-full bg-[#09090b] py-4 lg:static lg:top-auto lg:z-0 lg:h-0 lg:py-0">
+        <div className="fixed top-0 z-40 h-16 w-full bg-background py-4 lg:static lg:top-auto lg:z-0 lg:h-0 lg:py-0">
           <div className="container flex max-w-xl items-center justify-between space-x-2 lg:ml-auto lg:mr-0 lg:pr-[4.5rem]">
             <Skeleton className="h-6 w-28" />
             <Skeleton className="h-7 w-16" />
diff --git a/src/app/(checkout)/checkout/[storeId]/page.tsx b/src/app/(checkout)/checkout/[storeId]/page.tsx
index a755342d1..afcef315d 100644
--- a/src/app/(checkout)/checkout/[storeId]/page.tsx
+++ b/src/app/(checkout)/checkout/[storeId]/page.tsx
@@ -95,7 +95,7 @@ export default async function CheckoutPage({ params }: CheckoutPageProps) {
   return (
     <section className="relative flex h-full min-h-dvh flex-col items-start justify-center lg:h-dvh lg:flex-row lg:overflow-hidden">
       <div className="w-full space-y-12 pt-8 lg:pt-16">
-        <div className="fixed top-0 z-40 h-16 w-full bg-[#09090b] py-4 lg:static lg:top-auto lg:z-0 lg:h-0 lg:py-0">
+        <div className="fixed top-0 z-40 h-16 w-full bg-background py-4 lg:static lg:top-auto lg:z-0 lg:h-0 lg:py-0">
           <div className="container flex max-w-xl items-center justify-between space-x-2 lg:ml-auto lg:mr-0 lg:pr-[4.5rem]">
             <Link
               aria-label="Back to cart"