diff --git a/client/public/components/basket-popout.mjs b/client/public/components/basket-popout.mjs
index 427314e..8ac6e09 100644
--- a/client/public/components/basket-popout.mjs
+++ b/client/public/components/basket-popout.mjs
@@ -127,28 +127,24 @@ class BasketPopout extends Component {
                             <span class="popup-close">&times;</span>
                         </div>
                         <div class="popup-content">
-                            <div class="popup-content-item">
-                                <span class="popup-content-item-title">Total</span>
-                                <span class="popup-content-item-value">{this.state.total}</span>
-                            </div>
-                            <div class="popup-content-item">
-                                <span class="popup-content-item-title">Items</span>
-                                ${Object.keys(this.state.items).map((key) => {
-                                    const item = this.state.items[key];
-                                    return /* html */`
-                                        <div class="popup-content-item">
-                                            <span class="popup-content-item-title">X${item.quantity}</span>
-                                            <span class="popup-content-item-value">
-                                                <super-compact-listing-component class="sc-listing" 
-                                                                                 id="${key.split('~')[0]}"
-                                                                                 type="${item.type}"
-                                                                                 quantity="${item.quantity}">
-                                                </super-compact-listing-component>
-                                            </span>
-                                        </div>
-                                    `;
-                                }).join('')}
+                            <div class="popup-content-header">
+                                Total {this.state.total}
                             </div>
+                            <span class="popup-content-item-title">Items</span>
+                            ${Object.keys(this.state.items).map((key) => {
+                                const item = this.state.items[key];
+                                return /* html */`
+                                    <div class="popup-content-item">
+                                        <span class="popup-content-item-quantity">X${item.quantity}</span>
+                                        <super-compact-listing-component class="sc-listing" 
+                                                                            id="${key.split('~')[0]}"
+                                                                            type="${item.type}"
+                                                                            quantity="${item.quantity}">
+                                        </super-compact-listing-component>
+                                        <span class="popup-content-item-value">modifier</span>
+                                    </div>
+                                `;
+                            }).join('')}
                         </div>
                         <div class="popup-footer">
                             <a href="/basket"><button class="popup-footer-button">View Basket</button></a>
@@ -195,13 +191,13 @@ class BasketPopout extends Component {
                     font-size: 0.5em;
                     position: absolute;
                     background-color: #AB8FFF;
+                    border: 1px solid #222;
                     right: 0;
                     width: 60%;
-                    padding-top: 20px;
-                    padding-bottom: 20px;
-                    height: auto;
-                    overflow-y: scroll;
-                    overflow-x: hidden;
+                    max-height: 550px;
+                    max-width: 500px;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
@@ -216,6 +212,39 @@ class BasketPopout extends Component {
                     }
                 }
 
+                .popup-content {
+                    display: flex;
+                    flex-direction: column;
+                    flex-wrap: nowrap;
+                    justify-content: left;
+                    width: 100%;
+                    height: 100%;
+                    overflow-y: scroll;
+                    overflow-x: hidden;
+                    justify-content: space-between;
+                }
+
+                .popup-content-item {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+
+                .popup-content-item-quantity {
+                    font-size: 2em;
+                    flex-grow: 1;
+                }
+
+                .sc-listing {
+                    flex-grow: 3;
+                }
+
+                .popup-content-item-value {
+                    text-align: right;
+                    flex-grow: 1;
+                }
             `,
         };
     }
diff --git a/client/public/components/product-listing.mjs b/client/public/components/product-listing.mjs
index 1bc0b90..b5c49c2 100644
--- a/client/public/components/product-listing.mjs
+++ b/client/public/components/product-listing.mjs
@@ -76,8 +76,6 @@ class ProductListing extends Component {
             `;
         }
 
-        console.log(this.state)
-
         // brick colour availability for bricks
         let brickColourAvailability = '';
         let brickColourSelector = '';
@@ -105,7 +103,7 @@ class ProductListing extends Component {
                 Select Brick Colour&nbsp;   
                 <select class="brick-colour-selector-select">
                     ${this.state.colours.map(colour => /* html */`
-                        <option value="${colour.name}">
+                        <option value="${colour.id}">
                             ${colour.type} ${colour.name}
                         </option>
                     `).join('')}
@@ -230,7 +228,12 @@ class ProductListing extends Component {
         const addToBasket = this.root.querySelector('.add-to-basket-button');
 
         addToBasket.addEventListener('click', () => {
-            AddProductToBasket(this.state.id, this.state.type, Math.abs(parseInt(quantityInput.value)));
+            // if it is a brick, get potential modifier from the drop down menu
+            const brick = this.state.type === 'brick';
+            const modifier = brick ? this.root.querySelector('.brick-colour-selector-select').value : undefined;
+            console.log(modifier);
+
+            AddProductToBasket(this.state.id, this.state.type, Math.abs(parseInt(quantityInput.value)), modifier);
             quantityInput.value = 1;
         });
     }
diff --git a/src/controllers/controller-master.js b/src/controllers/controller-master.js
index 3d9aaff..f1ba238 100644
--- a/src/controllers/controller-master.js
+++ b/src/controllers/controller-master.js
@@ -54,7 +54,11 @@ function LevenshteinDistance(s, t) {
 // TODO: get this working properly
 
 function SanatiseQuery(query) {
-    return escape(query).toLowerCase().replace(/[()*]/g, '');
+    query = query.trim();
+    query = query.replace(/[^a-zA-Z0-9\s]/g, '');
+    query = escape(query);
+    query = query.toLowerCase();
+    return query;
 }
 
 module.exports = {