diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index fc9b212fa..7440a8d81 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -33,7 +33,7 @@ const CartSidebarView: FC = () => {
   return (
     <div
       className={cn('h-full flex flex-col', {
-        'bg-white text-black': isEmpty,
+        'bg-secondary text-secondary': isEmpty,
         'bg-red text-white': error,
         'bg-green text-white': success,
       })}
@@ -57,7 +57,7 @@ const CartSidebarView: FC = () => {
 
       {isEmpty ? (
         <div className="flex-1 px-4 flex flex-col justify-center items-center ">
-          <span className="border border-dashed border-black rounded-full flex items-center justify-center w-16 h-16 p-12 bg-white text-black">
+          <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
             <Bag className="absolute" />
           </span>
           <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
diff --git a/pages/cart.tsx b/pages/cart.tsx
index 7fee8176d..62fd618b4 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -41,14 +41,14 @@ export default function Cart({}: InferGetStaticPropsType<
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">
         {isEmpty ? (
-          <div className="flex-1 px-4 flex flex-col justify-center items-center ">
-            <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
+          <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
+            <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
               <Bag className="absolute" />
             </span>
             <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
               Your cart is empty
             </h2>
-            <p className="text-accents-2 px-10 text-center pt-2">
+            <p className="text-accents-6 px-10 text-center pt-2">
               Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
             </p>
           </div>