diff --git a/src/app/formulaManager/formulaManager.component.html b/src/app/formulaManager/formulaManager.component.html
index d0955e3..c18adcc 100644
--- a/src/app/formulaManager/formulaManager.component.html
+++ b/src/app/formulaManager/formulaManager.component.html
@@ -33,13 +33,13 @@
             </div>
         </div>
     </div>
-    <div class="row mt-3 mb-5">
-        <div class="col-12 col-lg-3">
+    <div class="row mt-3">
+        <div class="col-12 col-lg-3 mb-5">
             <mat-form-field class="w-100">
                 <input #search matInput placeholder="Search">
                 <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
-            <mat-list style="height: 500px; overflow-y: scroll">
+            <mat-list style="max-height: 500px; overflow-y: scroll">
                 <ng-container *ngFor="let f of formulas | async; let i = index">
                     <mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
                     <mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}">
@@ -60,7 +60,7 @@
                 </div>
             </div>
         </div>
-        <div *ngIf="formula" class="col-12 col-lg-9">
+        <div *ngIf="formula" class="col-12 col-lg-9 mb-5">
             <div>
                 <div class="float-left">
                     <h3 class="mb-0">{{formula.name}}</h3>
@@ -88,11 +88,10 @@
                         <td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
                 </tbody>
             </table>
-            <div class="col-12 d-none d-lg-block" style="height: 4px; background:black; width: 100%;"></div>
-            <table class="w-100 my-4">
-                <tr>
-                    <td style="width: 70%"></td>
-                    <td style="width: 20%">
+            <div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>
+            <div class="d-flex">
+                <div class="d-inline ml-auto">
+                    <div class="d-inline-block mr-3">
                         <mat-form-field style="width: 75px">
                             <input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
                         </mat-form-field>
@@ -104,14 +103,14 @@
                                 <mat-option value="lb">lb</mat-option>
                             </mat-select>
                         </mat-form-field>
-                    </td>
-                    <td style="width: 10%">
-                        <mat-form-field id="totalCost">
-                            <input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="font-size: x-large; text-align: right;">
+                    </div>
+                    <div class="d-inline-block">
+                        <mat-form-field id="totalCost" style="width: 100px">
+                            <input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="text-align: right;">
                         </mat-form-field>
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
             <div *ngIf="store.user" class="w-100 mt-4">
                 <div class="float-right">
                     <button *ngIf="!formula.approved" mat-raised-button class="mr-3" (click)="approve(formula)">
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index c1b6b15..fbce292 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -38,7 +38,7 @@
 </div>
 <div class="container-fluid pb-5">
     <div class="row">
-        <div class="col p-0" style="position: relative">
+        <div class="col d-none d-md-inline p-0" style="position: relative">
             <div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">
                 <h2 class="d-none d-lg-inline">Free Shipping</h2>
                 <div class="">
@@ -48,7 +48,7 @@
                 </div>
             </div>
         </div>
-        <div class="col p-0">
+        <div class="col mb-3 mb-md-0 p-0">
             <img src="/assets/img/shipping.png" alt="Free Shipping" style="width: 100%; height: auto">
         </div>
     </div>
@@ -88,7 +88,7 @@
                 </div>
             </div>
         </div>
-        <div class="col p-0" style="position: relative">
+        <div class="d-none d-md-inline col p-0" style="position: relative">
             <div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">
                 <h2 class="d-none d-lg-inline">Proud Distributor</h2>
                 <div class="">