diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss
index 6956a3d..c26b381 100644
--- a/src/app/grid/grid.component.scss
+++ b/src/app/grid/grid.component.scss
@@ -1,10 +1,9 @@
 :host {
-    background-color: white;
     padding: 0;
     @media (min-width: 500px) {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
-        grid-gap: 2px;
+        grid-gap: 10px;
         grid-auto-flow: dense;
     }
     @media (min-width: 750px) {
@@ -13,11 +12,12 @@
     @media (min-width: 1000px) {
         grid-template-columns: repeat(4, 1fr);
     }
-     ::ng-deep>* {
-        background-color: #303030;
+     ::ng-deep>mat-card {
+        background-color: #2C2C2C;
+        transition: background-color 1s;
     }
-     ::ng-deep>div {
-        padding: 10px;
+     ::ng-deep>mat-card:hover {
+        background-color: #2E2E2E;
     }
     max-width: 150ch;
     margin: auto;

diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss
index 6956a3d..c26b381 100644
--- a/src/app/grid/grid.component.scss
+++ b/src/app/grid/grid.component.scss
@@ -1,10 +1,9 @@
 :host {
-    background-color: white;
     padding: 0;
     @media (min-width: 500px) {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
-        grid-gap: 2px;
+        grid-gap: 10px;
         grid-auto-flow: dense;
     }
     @media (min-width: 750px) {
@@ -13,11 +12,12 @@
     @media (min-width: 1000px) {
         grid-template-columns: repeat(4, 1fr);
     }
-     ::ng-deep>* {
-        background-color: #303030;
+     ::ng-deep>mat-card {
+        background-color: #2C2C2C;
+        transition: background-color 1s;
     }
-     ::ng-deep>div {
-        padding: 10px;
+     ::ng-deep>mat-card:hover {
+        background-color: #2E2E2E;
     }
     max-width: 150ch;
     margin: auto;
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 4302aec..f264a1d 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -3,13 +3,13 @@
         <br/>
         <h1>Welcome to my homepage!</h1>
     </div>
-    <div>
+    <mat-card>
         <h2>Who am I?</h2>
         <p>
             I'm Lukas, a german student doing software development and more cool sciency stuff and this is my webpage where I want to showcase some of my work.
         </p>
-    </div>
-    <div class="wide-2 tall-2">
+    </mat-card>
+    <mat-card class="wide-2 tall-2">
         <a href="https://lukas-eisenhauer.de/git/lukas/tree-os">
             <h2>Tree-os</h2>
             <img src="https://lukas-eisenhauer.de/git/lukas/tree-os/blob/master/tree-os.png?raw=true">
@@ -23,9 +23,9 @@
                 like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible.
             </p>
         </div>
-    </div>
+    </mat-card>
 
-    <div>
+    <mat-card>
         <a href="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator">
             <h2>Traffic simulator</h2>
             <img src="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator/blob/master/screenshot.PNG?raw=true">
@@ -34,11 +34,14 @@
             For school, I have to write a scientific article about something regarding "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code
             <a href="https://lukas-eisenhauer.de/git/lukas/Traffic-Simulator">on my git</a>.
         </p>
-    </div>
-    <div>
+    </mat-card>
+    <mat-card>
         <h2>Websites</h2>
         <p>
             I personally created this website you are currently looking at using <a href="https://angular.io">Angular</a> and the <a href="https://material.io/design">Material design theme</a>. Additionally, I also created <a href="https://www.mpe.mpg.de/~eisenhau/">Frank Eisenhauer's webpage</a>            and host an instance of <a href="https://lukas-eisenhauer.de/git">gitBucket</a>.
         </p>
-    </div>
+        <p>
+            The backend is made using <a href="https://rubyonrails.org/">Ruby on rails</a>.
+        </p>
+    </mat-card>
 </app-grid>
\ No newline at end of file