diff --git a/src/Components/CartProgress.js b/src/Components/CartProgress.js
new file mode 100644
index 00000000..740eb03b
--- /dev/null
+++ b/src/Components/CartProgress.js
@@ -0,0 +1,103 @@
+import React from "react";
+
+import LinearProgress from "@material-ui/core/LinearProgress";
+import Box from "@material-ui/core/Box";
+import Grid from "@material-ui/core/Grid";
+
+const totalPrice = (context, deliveryFee, discount) => 
+  (
+    Number(context.cartTotal.totalPrice) +
+    Number(deliveryFee) -
+    Number(discount)
+  ).toFixed(2);
+
+const LinearProgressWithLabel = (props) => 
+  <Box display="flex" alignItems="center" flexDirection="column">
+    <Box width="100%" mr={1}>
+      <LinearProgress variant="determinate" {...props} />
+    </Box>
+  </Box>;
+
+const ProgressIndicator = ({ totalPrice, targetValue, name }) =>
+  <div class="row progress">
+    {targetValue > totalPrice ? (
+      <Grid container direction={"row"}>
+        <Grid
+          style={{
+            color: "black",
+            width: "100%",
+            marginBottom: "20px",
+            fontSize: "18px",
+          }}
+        >
+          ${(targetValue - totalPrice).toFixed(2)} to {name.toLowerCase()} 
+        </Grid>
+        <Grid style={{ width: "100%" }}>
+          <LinearProgressWithLabel
+            value={
+              (100 * totalPrice) / targetValue
+            }
+          />
+        </Grid>
+      </Grid>
+    ) : (
+      <h5 style={{ color: "green" }}>{name} Met!</h5>
+    )}
+  </div>
+
+export default ({context, deliveryFee, discount}) => <>
+  {context.channel === "delivery" ? <>
+    {context.pageData.minimum_order && context.pageData.minimum_order !== "0" ? (
+      <ProgressIndicator 
+        totalPrice={context.cartTotal.totalPrice} 
+        targetValue={context.pageData.minimum_order}
+        name="Minimum Amount"
+      />
+    ) : null}
+    {context.pageData.free_delivery && context.pageData.free_delivery !== "0" ? (
+      <ProgressIndicator 
+        totalPrice={context.cartTotal.totalPrice} 
+        targetValue={context.pageData.free_delivery}
+        name="Free Delivery"
+      />
+    ) : null}
+    <div class="row">
+      {(context.delivery_option === "none" ||
+        !context.delivery_option) && (
+        <div className="sub">DELIVERY FEES NOT INCLUDED</div>
+      )}
+      {(context.delivery_option === "fixed" ||
+        context.delivery_option === "distance") &&
+        context.delivery_fee !== undefined && (
+          <React.Fragment>
+            <div className="sub">DELIVERY FEES: </div>
+            <div className="sub-price">
+              <p className="sub-price__val">${deliveryFee.toFixed(2)}</p>
+            </div>
+          </React.Fragment>
+        )}
+    </div>
+  </> : null}
+  {(context.all_promo || context.selfcollect_promo) && discount > 0 ? (
+    <div class="row">
+      <div className="sub">DISCOUNT: </div>
+      <div className="sub-price">
+        <p className="sub-price__val">- ${discount}</p>
+      </div>
+    </div>
+  ) : null}
+  <div class="row">
+    <div className="sub">SUBTOTAL</div>
+    <div className="sub-price">
+      {(context.delivery_option === "none" ||
+        context.channel === "collect" || 
+        (
+          (context.delivery_option === "fixed" || context.delivery_option === "distance") &&
+          context.channel === "delivery" &&
+          context.delivery_fee !== undefined
+        )) && (
+        <p className="sub-price__val">${totalPrice(context, deliveryFee, discount)}</p>
+      )}
+    </div>
+  </div>
+</>
\ No newline at end of file
diff --git a/src/Components/PageCart.js b/src/Components/PageCart.js
index 88aac86e..a27bc0ce 100644
--- a/src/Components/PageCart.js
+++ b/src/Components/PageCart.js
@@ -2,13 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import CartProduct from "./PageCartProduct";
+import CartProgress from "./CartProgress";
 import { CartContext } from "./themeContext";
 import "./style.scss";
 import Slide from "@material-ui/core/Slide";
 import Component from "./index";
-import LinearProgress from "@material-ui/core/LinearProgress";
-import Box from "@material-ui/core/Box";
-import Grid from "@material-ui/core/Grid";
 import Dialog from "@material-ui/core/Dialog";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
@@ -23,16 +21,6 @@ const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
-function LinearProgressWithLabel(props) {
-  return (
-    <Box display="flex" alignItems="center" flexDirection="column">
-      <Box width="100%" mr={1}>
-        <LinearProgress variant="determinate" {...props} />
-      </Box>
-    </Box>
-  );
-}
-
 const PromoCodeDialog = (props) => {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -167,7 +155,7 @@ class PageCart extends React.Component {
       classes.push("float-cart--open");
     }
 
-    const delivery_fee =
+    const deliveryFee =
       (cartTotal.totalPrice <= this.context.pageData.free_delivery ||
       this.context.pageData.free_delivery === "0") && this.context.delivery_fee
         ? Number(this.context.delivery_fee)
@@ -195,18 +183,6 @@ class PageCart extends React.Component {
 
     discount = discount.toFixed(2);
 
-    var totalPrice =
-      Number(this.context.cartTotal.totalPrice) +
-      Number(delivery_fee) -
-      Number(discount);
-
-    console.log(
-      Number(this.context.cartTotal.totalPrice),
-      Number(delivery_fee),
-      Number(discount)
-    );
-    totalPrice = totalPrice.toFixed(2);
-
     return (
       <span className={classes.join(" ")}>
         {/* If cart open, show close (x) button */}
@@ -311,135 +287,7 @@ class PageCart extends React.Component {
             )}
           </div>
           <div className="float-cart__footer">
-            <div class="row">
-              {this.context.pageData.minimum_order &&
-              this.context.pageData.minimum_order !== "0" &&
-              this.context.channel === "delivery" ? (
-                <React.Fragment>
-                  {this.context.pageData.minimum_order - cartTotal.totalPrice >
-                  0 ? (
-                    <div className="progress">
-                      <Grid container direction={"row"}>
-                        <Grid
-                          style={{
-                            color: "black",
-                            width: "100%",
-                            marginBottom: "20px",
-                            fontSize: "18px",
-                          }}
-                        >
-                          $
-                          {this.context.pageData.minimum_order -
-                            cartTotal.totalPrice}{" "}
-                          to minimum amount
-                        </Grid>
-                        <Grid style={{ width: "100%" }}>
-                          <LinearProgressWithLabel
-                            value={
-                              (100 * cartTotal.totalPrice) /
-                              this.context.pageData.minimum_order
-                            }
-                          />
-                        </Grid>
-                      </Grid>
-                    </div>
-                  ) : (
-                    <React.Fragment>
-                      <div className="progress">
-                        <h5 style={{ color: "green" }}>Minimum Amount Met! </h5>
-                      </div>
-                    </React.Fragment>
-                  )}
-                </React.Fragment>
-              ) : null}
-            </div>
-            <div class="row">
-              {this.context.pageData.free_delivery &&
-              this.context.pageData.free_delivery !== "0" &&
-              this.context.channel === "delivery" ? (
-                <React.Fragment>
-                  {this.context.pageData.free_delivery - cartTotal.totalPrice >
-                  0 ? (
-                    <div className="progress">
-                      <Grid container direction={"row"}>
-                        <Grid
-                          style={{
-                            color: "black",
-                            width: "100%",
-                            marginBottom: "20px",
-                            fontSize: "18px",
-                          }}
-                        >
-                          $
-                          {this.context.pageData.free_delivery -
-                            cartTotal.totalPrice}{" "}
-                          to free delivery
-                        </Grid>
-                        <Grid style={{ width: "100%" }}>
-                          <LinearProgressWithLabel
-                            value={
-                              (100 * cartTotal.totalPrice) /
-                              this.context.pageData.free_delivery
-                            }
-                          />
-                        </Grid>
-                      </Grid>
-                    </div>
-                  ) : (
-                    <React.Fragment>
-                      <div className="progress">
-                        <h5 style={{ color: "green" }}>Free Delivery Met! </h5>
-                      </div>
-                    </React.Fragment>
-                  )}
-                </React.Fragment>
-              ) : null}
-            </div>
-            {this.context.channel === "delivery" ? (
-              <div class="row">
-                {(this.context.delivery_option === "none" ||
-                  !this.context.delivery_option) && (
-                  <div className="sub">DELIVERY FEES NOT INCLUDED</div>
-                )}
-                {(this.context.delivery_option === "fixed" ||
-                  this.context.delivery_option === "distance") &&
-                  this.context.delivery_option &&
-                  this.context.delivery_fee !== undefined && (
-                    <React.Fragment>
-                      <div className="sub">DELIVERY FEES: </div>
-                      <div className="sub-price">
-                        <p className="sub-price__val">${delivery_fee}</p>
-                      </div>
-                    </React.Fragment>
-                  )}
-              </div>
-            ) : null}
-            {(this.context.all_promo || this.context.selfcollect_promo) &&
-            discount > 0 ? (
-              <div class="row">
-                <React.Fragment>
-                  <div className="sub">DISCOUNT: </div>
-                  <div className="sub-price">
-                    <p className="sub-price__val">- ${discount}</p>
-                  </div>
-                </React.Fragment>
-              </div>
-            ) : null}
-            <div class="row">
-              <div className="sub">SUBTOTAL</div>
-              <div className="sub-price">
-                {(this.context.delivery_option === "none" ||
-                  this.context.channel === "collect") && (
-                  <p className="sub-price__val">${totalPrice}</p>
-                )}
-                {(this.context.delivery_option === "fixed" ||
-                  this.context.delivery_option === "distance") &&
-                  this.context.channel === "delivery" &&
-                  this.context.delivery_fee !== undefined && (
-                    <p className="sub-price__val">${totalPrice}</p>
-                  )}
-              </div>
-            </div>
+            <CartProgress context={this.context} deliveryFee={deliveryFee} discount={discount}/>
             {this.context.promo_code ? (
               <Button
                 onClick={this.openFloatPromo}