diff --git a/src/app/weather/weather.component.html b/src/app/weather/weather.component.html
index 021ee29..fa6e4dc 100644
--- a/src/app/weather/weather.component.html
+++ b/src/app/weather/weather.component.html
@@ -35,7 +35,7 @@
         </div>
     </div>
     <!-- Forecast -->
-    <mat-card class="m-3" style="max-width: 450px">
+    <mat-card class="m-3 mx-auto" style="max-width: 450px">
         <div class="d-flex justify-content-center">
             <div *ngFor="let day of weatherService.weather?.daily.data.slice(1, 7)" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
                 {{day.time.toString().slice(0, 4).toUpperCase()}}
@@ -46,7 +46,7 @@
         </div>
     </mat-card>
     <!-- Sunlight -->
-    <mat-card class="m-3" style="max-width: 450px">
+    <mat-card class="m-3 mx-auto" style="max-width: 450px">
         <h5>Sunlight</h5>
         <div class="d-flex justify-content-center">
             <div class="d-flex align-items-center flex-grow-1">
@@ -62,7 +62,7 @@
         <canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas>
     </mat-card>
     <!-- Wind -->
-    <mat-card class="m-3" style="max-width: 450px">
+    <mat-card class="m-3 mx-auto" style="max-width: 450px">
         <h5>Wind</h5>
         <div class="d-flex justify-content-center">
             <div class="d-flex align-items-center flex-grow-1">
@@ -81,7 +81,7 @@
         </div>
     </mat-card>
     <!-- Atmospheric -->
-    <mat-card class="m-3" style="max-width: 450px">
+    <mat-card class="m-3 mx-auto" style="max-width: 450px">
         <h5>Atmospheric</h5>
         <div class="d-flex">
             <div class="flex-grow-1">