diff --git a/app/frontend/src/javascript/lib/order.ts b/app/frontend/src/javascript/lib/order.ts
index af2447e02..7f8fd6766 100644
--- a/app/frontend/src/javascript/lib/order.ts
+++ b/app/frontend/src/javascript/lib/order.ts
@@ -53,6 +53,8 @@ export default class OrderLib {
    */
   static statusColor = (order: Order) => {
     switch (order.state) {
+      case 'cart':
+        return 'cart';
       case 'payment':
         if (order.payment_state === 'failed') {
           return 'error';
diff --git a/app/frontend/src/stylesheets/modules/store/order-item.scss b/app/frontend/src/stylesheets/modules/store/order-item.scss
index 75b5a9201..ee8bb94a1 100644
--- a/app/frontend/src/stylesheets/modules/store/order-item.scss
+++ b/app/frontend/src/stylesheets/modules/store/order-item.scss
@@ -17,6 +17,7 @@
   }
   .fab-state-label {
     --status-color: var(--success);
+    &.cart { --status-color: var(--secondary-light); }
     &.error { --status-color: var(--alert); }
     &.canceled { --status-color: var(--alert-light); }
     &.pending { --status-color: var(--information); }
@@ -45,4 +46,4 @@
     }
     p { @include text-base(600); }
   }
-}
\ No newline at end of file
+}
diff --git a/app/frontend/src/stylesheets/modules/store/orders.scss b/app/frontend/src/stylesheets/modules/store/orders.scss
index 789725992..2157ef980 100644
--- a/app/frontend/src/stylesheets/modules/store/orders.scss
+++ b/app/frontend/src/stylesheets/modules/store/orders.scss
@@ -21,7 +21,7 @@
 }
 
 .show-order {
-  &-nav { 
+  &-nav {
     max-width: 1600px;
     margin: 0 auto;
     @include grid-col(12);
@@ -102,9 +102,10 @@
 
   .fab-state-label {
     --status-color: var(--success);
+    &.cart { --status-color: var(--secondary-light); }
     &.error { --status-color: var(--alert); }
     &.canceled { --status-color: var(--alert-light); }
     &.pending { --status-color: var(--information); }
     &.normal { --status-color: var(--success); }
   }
-}
\ No newline at end of file
+}