diff --git a/03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.tsx b/03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.tsx
index e635094..358b630 100644
--- a/03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.tsx
+++ b/03_source/mobile/src/pages/DemoOrderingApp/components/CoffeeCard.tsx
@@ -1,28 +1,26 @@
-import { IonCard, IonCardSubtitle, IonCardTitle, IonCol } from "@ionic/react";
-import { ArrowRightSquare } from "react-iconly";
+import { IonCard, IonCardSubtitle, IonCardTitle, IonCol } from '@ionic/react';
+import { ArrowRightSquare } from 'react-iconly';
 
-import styles from "./CoffeeCard.module.css";
+import styles from './CoffeeCard.module.css';
 
-const CoffeeCard = props => {
+const CoffeeCard = (props) => {
+  const { coffee } = props;
 
-    const { coffee } = props;
+  return (
+    <IonCol size="6" className="animate__animated animate__fadeIn">
+      <IonCard className={styles.coffeeCard} routerLink={`/coffee/${coffee.id}`}>
+        <img src={coffee.image} alt="coffee" />
+        <IonCardTitle>{coffee.name}</IonCardTitle>
+        <IonCardSubtitle>{coffee.summary}</IonCardSubtitle>
+        <div className={styles.coffeePrice}>
+          <h4>${coffee.price}</h4>
+          <div className={styles.coffeeAddButton}>
+            <ArrowRightSquare set="bold" className="yellow-icon" />
+          </div>
+        </div>
+      </IonCard>
+    </IonCol>
+  );
+};
 
-    return (
-
-        <IonCol size="6" className="animate__animated animate__fadeIn">
-            <IonCard className={ styles.coffeeCard } routerLink={ `/coffee/${ coffee.id }` }>
-                <img src={ coffee.image } alt="coffee" />
-                <IonCardTitle>{ coffee.name }</IonCardTitle>
-                <IonCardSubtitle>{ coffee.summary }</IonCardSubtitle>
-                <div className={ styles.coffeePrice }>
-                    <h4>${ coffee.price }</h4>
-                    <div className={ styles.coffeeAddButton }>
-                        <ArrowRightSquare set="bold" className="yellow-icon" />
-                    </div>
-                </div>
-            </IonCard>
-        </IonCol>
-    );
-}
-
-export default CoffeeCard;
\ No newline at end of file
+export default CoffeeCard;
diff --git a/03_source/mobile/src/pages/DemoOrderingApp/components/ViewCoffeeCard.tsx b/03_source/mobile/src/pages/DemoOrderingApp/components/ViewCoffeeCard.tsx
index 202e6e5..5c035ce 100644
--- a/03_source/mobile/src/pages/DemoOrderingApp/components/ViewCoffeeCard.tsx
+++ b/03_source/mobile/src/pages/DemoOrderingApp/components/ViewCoffeeCard.tsx
@@ -1,71 +1,70 @@
-import { IonButton, IonCard, IonCardSubtitle, IonCardTitle, IonCol, IonRow } from "@ionic/react";
+import { IonButton, IonCard, IonCardSubtitle, IonCardTitle, IonCol, IonRow } from '@ionic/react';
 
-import { useRef } from "react";
-import { Bag } from "react-iconly";
-import { addToCart } from "../store/CartStore";
-import '../pages/Home.css';
+import { useRef } from 'react';
+import { Bag } from 'react-iconly';
+import { addToCart } from '../store/CartStore';
+import '../pages/Home.scss';
 
-const ViewCoffeeCard = props => {
+const ViewCoffeeCard = (props) => {
+  const { coffee, cartRef } = props;
+  const coffeeCartRef = useRef();
 
-    const { coffee, cartRef } = props;
-    const coffeeCartRef = useRef();
+  const addCoffeeToCart = (e, coffeeID) => {
+    e.preventDefault();
+    e.stopPropagation();
 
-    const addCoffeeToCart = (e, coffeeID) => {
+    coffeeCartRef.current.style.display = '';
+    coffeeCartRef.current.classList.add('animate__fadeOutUp');
 
-        e.preventDefault();
-        e.stopPropagation();
+    setTimeout(() => {
+      cartRef.current.classList.add('animate__tada');
+      addToCart(coffeeID);
 
-        coffeeCartRef.current.style.display = "";
-        coffeeCartRef.current.classList.add("animate__fadeOutUp");
+      setTimeout(() => {
+        cartRef.current.classList.remove('animate__tada');
+        coffeeCartRef.current.style.display = 'none';
+      }, 500);
+    }, 500);
+  };
 
-        setTimeout(() => {
+  return (
+    <IonRow key={coffee.id} className="animate__animated animate__fadeIn">
+      <IonCol size="6">
+        <IonCard className="coffee-card">
+          <img src={coffee.image} alt="coffee type" />
+          <IonCardTitle className="custom-margin-left">{coffee.name}</IonCardTitle>
+          <IonCardSubtitle className="custom-margin-left">{coffee.summary}</IonCardSubtitle>
+        </IonCard>
+      </IonCol>
 
-            cartRef.current.classList.add("animate__tada");
-            addToCart(coffeeID);
+      <IonCol size="6" className="ion-margin-top ion-padding-top ion-padding-end">
+        <IonCardSubtitle>Description</IonCardSubtitle>
+        <p>{coffee.description}</p>
 
-            setTimeout(() => {
-                
-                cartRef.current.classList.remove("animate__tada");
-                coffeeCartRef.current.style.display = "none";
-            }, 500);
-        }, 500);
-    }
+        <IonRow className="ion-justify-content-between">
+          <IonCol size="8">
+            <IonButton routerLink={`/coffee/${coffee.id}`} color="main" expand="block">
+              View &rarr;
+            </IonButton>
+          </IonCol>
 
-    return (
+          <IonCol size="4">
+            <IonButton color="main" expand="block" onClick={(e) => addCoffeeToCart(e, coffee.id)}>
+              <Bag set="bold" />
+            </IonButton>
 
-        <IonRow key={ coffee.id } className="animate__animated animate__fadeIn">
-            <IonCol size="6">
-
-                <IonCard className="coffee-card">
-                    
-                    <img src={ coffee.image } alt="coffee type" />
-                        <IonCardTitle className="custom-margin-left">{ coffee.name }</IonCardTitle>
-                        <IonCardSubtitle className="custom-margin-left">{ coffee.summary }</IonCardSubtitle>
-                </IonCard>
-            </IonCol>
-
-            <IonCol size="6" className="ion-margin-top ion-padding-top ion-padding-end">
-                    <IonCardSubtitle>Description</IonCardSubtitle>
-                    <p>{ coffee.description }</p>
-
-                    <IonRow className="ion-justify-content-between">
-                        <IonCol size="8">
-                            <IonButton routerLink={ `/coffee/${ coffee.id }`} color="main" expand="block">View &rarr;</IonButton>
-                        </IonCol>
-
-                        <IonCol size="4">
-                            <IonButton color="main" expand="block" onClick={ e => addCoffeeToCart(e, coffee.id) }>
-                                <Bag set="bold" />
-                            </IonButton>
-
-                            <div ref={ coffeeCartRef } style={{ position: "absolute", display: "none", fontSize: "3rem" }} className="animate__animated">
-                                <Bag set="bold" />
-                            </div>
-                        </IonCol>
-                    </IonRow>
-            </IonCol>
+            <div
+              ref={coffeeCartRef}
+              style={{ position: 'absolute', display: 'none', fontSize: '3rem' }}
+              className="animate__animated"
+            >
+              <Bag set="bold" />
+            </div>
+          </IonCol>
         </IonRow>
-    );
-}
+      </IonCol>
+    </IonRow>
+  );
+};
 
-export default ViewCoffeeCard;
\ No newline at end of file
+export default ViewCoffeeCard;
diff --git a/03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx b/03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx
index 0995d1f..cc74788 100644
--- a/03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx
+++ b/03_source/mobile/src/pages/DemoOrderingApp/pages/Favourites.tsx
@@ -18,7 +18,7 @@ import { useEffect, useRef, useState } from 'react';
 import ViewCoffeeCard from '../components/ViewCoffeeCard';
 import { CartStore, CoffeeStore, FavouriteStore } from '../store';
 import { getCartCoffees, getCoffees, getFavouriteCoffees } from '../store/Selectors';
-import './Home.css';
+import './Home.scss';
 
 const Favourites = (): React.JSX.Element => {
   const cartRef = useRef(null);
diff --git a/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffee.tsx b/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffee.tsx
index 3d4fc19..93c9dd5 100644
--- a/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffee.tsx
+++ b/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffee.tsx
@@ -22,7 +22,7 @@ import { CoffeeSizeStore, CoffeeStore, FavouriteStore } from '../store';
 import { addToCart } from '../store/CartStore';
 import { addToFavourites } from '../store/FavouriteStore';
 import { getCoffee, getCoffeeSizes, getFavouriteCoffees } from '../store/Selectors';
-import './Home.css';
+import './Home.scss';
 
 import styles from './ViewCoffee.module.css';
 
diff --git a/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffees.tsx b/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffees.tsx
index 336befe..2bc79e0 100644
--- a/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffees.tsx
+++ b/03_source/mobile/src/pages/DemoOrderingApp/pages/ViewCoffees.tsx
@@ -20,7 +20,7 @@ import { useParams } from 'react-router';
 import ViewCoffeeCard from '../components/ViewCoffeeCard';
 import { CartStore, CoffeeStore } from '../store';
 import { getCoffees, getCartCoffees } from '../store/Selectors';
-import './Home.css';
+import './Home.scss';
 
 const ViewCoffees = (props): React.JSX.Element => {
   const router = useIonRouter();