diff --git a/package-lock.json b/package-lock.json
index 978544b..c7e885a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -475,6 +475,11 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.4.tgz",
       "integrity": "sha512-ND240vncmVD2KVe/KSQU3d/DxxoRipFg1+jFOFZGt0n0orCBHk/V1fu9iaG1sRyldL0+rCQ+fTI+1N4DTmMnxA=="
     },
+    "@angular/flex-layout": {
+      "version": "9.0.0-beta.29",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-9.0.0-beta.29.tgz",
+      "integrity": "sha512-93sxR+kYfYMOdnlWL0Q77FZ428gg8XnBu0YZm6GsCdkw/vLggIT/G1ZAqHlCPIODt6pxmCJ5KXh4ShvniIYDsA=="
+    },
     "@angular/forms": {
       "version": "9.1.4",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.4.tgz",
@@ -12315,12 +12320,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -12335,17 +12342,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -12462,7 +12472,8 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -12474,6 +12485,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -12488,6 +12500,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -12495,12 +12508,14 @@
             "minimist": {
               "version": "1.2.5",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -12519,6 +12534,7 @@
               "version": "0.5.3",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "^1.2.5"
               }
@@ -12608,7 +12624,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -12620,6 +12637,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12733,6 +12751,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -13242,7 +13261,6 @@
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -13257,8 +13275,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -13269,8 +13286,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -13387,8 +13403,7 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -13400,7 +13415,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -13415,7 +13429,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -13423,14 +13436,12 @@
             "minimist": {
               "version": "1.2.5",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -13449,7 +13460,6 @@
               "version": "0.5.3",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "^1.2.5"
               }
@@ -13511,8 +13521,7 @@
             "npm-normalize-package-bin": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "npm-packlist": {
               "version": "1.4.8",
@@ -13540,8 +13549,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -13553,7 +13561,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -13667,7 +13674,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
diff --git a/package.json b/package.json
index 45c97c5..bbe01fc 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@angular/common": "~9.1.4",
     "@angular/compiler": "~9.1.4",
     "@angular/core": "~9.1.4",
+    "@angular/flex-layout": "^9.0.0-beta.29",
     "@angular/forms": "~9.1.4",
     "@angular/material": "^9.2.2",
     "@angular/platform-browser": "~9.1.4",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a502af6..a8be856 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,7 +13,7 @@ import {MatMenuModule} from '@angular/material/menu';
 import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {WeatherComponent} from './weather/weather.component';
 import {HttpClientModule} from '@angular/common/http';
-import { MatButtonModule } from '@angular/material/button';
+import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
   declarations: [
@@ -33,7 +33,7 @@ import { MatButtonModule } from '@angular/material/button';
     MatMenuModule,
     MatIconModule,
     HttpClientModule,
-    MatButtonModule
+    FlexLayoutModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/dashboard/card.css b/src/app/dashboard/card.css
index ccde841..b37d1eb 100644
--- a/src/app/dashboard/card.css
+++ b/src/app/dashboard/card.css
@@ -1,9 +1,7 @@
 .dashboard-card {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
+  display: block;
+  min-width: 500px;
+  margin: 15px;
 }
 
 .dashboard-card-content {
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index cd0db4c..e4d4ad5 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,10 +1,4 @@
-<div class="grid-container">
-  <mat-grid-list cols="2" rowHeight="350px">
-    <mat-grid-tile>
-      <app-clock></app-clock>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <app-weather></app-weather>
-    </mat-grid-tile>
-  </mat-grid-list>
+<div gdColumns="repeat(auto-fill, minmax(500px, 1fr))">
+  <app-clock></app-clock>
+  <app-weather ></app-weather>
 </div>
diff --git a/src/index.html b/src/index.html
index 3b65867..11c0ee5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,6 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-<app-root></app-root>
+  <app-root></app-root>
 </body>
 </html>