diff --git a/src/app/[name]/(Dialogs)/cart/page.tsx b/src/app/[name]/(Dialogs)/cart/page.tsx
index d9cf0df..81330f4 100644
--- a/src/app/[name]/(Dialogs)/cart/page.tsx
+++ b/src/app/[name]/(Dialogs)/cart/page.tsx
@@ -56,7 +56,7 @@ const CartIndex = () => {
   };
 
   return (
-    <div className='overflow-y-auto h-full noscrollbar flex flex-col'>
+    <div className='overflow-y-auto h-full noscrollbar flex flex-col bg-background -mx-6 -mt-4 -mb-6 px-6 pt-4 pb-6'>
       <div className='grid grid-cols-3 items-center'>
         {isCartEmpty ? (
           <span></span>
diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
index 56d80d7..d8f949d 100644
--- a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
+++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
@@ -91,7 +91,7 @@ function OrderDetailInex() {
     }, [cartItems?.data?.coupon?.couponCode, cartItems?.data?.couponDiscount]);
 
     return (
-        <div className='h-full bg-inherit flex flex-col gap-5'>
+        <div className='h-full bg-background -mx-6 -mt-4 -mb-6 px-6 pt-4 pb-6 flex flex-col gap-5'>
             <CheckoutHeader />
 
             <ShippingSection