diff --git a/src/app/app.component.html b/src/app/app.component.html
index e3c3068..f33c2ea 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -31,7 +31,7 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
     </div>
   </div>
 
-  <div style="text-align: center">
+  <div style="text-align: center; display: flex; flex-direction: column; align-items: center">
     <heading-card #education_card [heading]="dataService.languagePack.education" type="light" styleClass="alarm-clock-animated"></heading-card>
     <p-timeline id="eduction-tl" [value]="dataService.education" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
       <ng-template pTemplate="marker">
@@ -66,5 +66,7 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
     <div style="width: var(--main-content-width); margin: 0 var(--main-content-side-margin); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1rem">
       <skills-card class="alarm-clock-animated" *ngFor="let skillCategory of dataService.skillCategories" [category]="skillCategory"></skills-card>
     </div>
+
+    <div class="spacer" style="width: 100vw; height: 50vh"></div>
   </div>
 </main>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index f15fcf2..77e742f 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -36,7 +36,7 @@
     width: 100%;
     height: 0.5vh;
     transform-origin: 0 50%;
-    background-color: wheat;
+    background-image: linear-gradient(to right, #a445b2, #fa4299);
   }
 }
 
@@ -55,18 +55,16 @@
   }
 
   .timeline-date-light {
-    background: var(--background-light);
-    border: var(--border-dark);
+    background: white;
     color: #4B5563;
   }
 
   .timeline-date-dark {
-    background: var(--background-dark);
-    border: var(--border-light);
+    background: rgb(75,75,75);
   }
 
   .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) {
-    .p-timeline-event-content timeline-card p-card div {
+    .p-timeline-event-content > timeline-card > div {
       transform-origin: right top;
     }
     .p-timeline-event-opposite p-badge span {
@@ -75,7 +73,7 @@
   }
 
   .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n + 1) {
-    .p-timeline-event-content timeline-card p-card div {
+    .p-timeline-event-content > timeline-card > div {
       transform-origin: left top;
     }
     .p-timeline-event-opposite p-badge span {
diff --git a/src/app/components/heading-card/heading-card.component.html b/src/app/components/heading-card/heading-card.component.html
index e8f37bc..570d706 100644
--- a/src/app/components/heading-card/heading-card.component.html
+++ b/src/app/components/heading-card/heading-card.component.html
@@ -1,5 +1,3 @@
-<p-card [styleClass]="cardStyleClass">
-  <ng-template pTemplate="content">
-    <h1 style="margin: 0">{{ heading }}</h1>
-  </ng-template>
-</p-card>
+<div [class]="cardStyleClass">
+  <h1 style="margin: 0">{{ heading }}</h1>
+</div>
diff --git a/src/app/components/heading-card/heading-card.component.scss b/src/app/components/heading-card/heading-card.component.scss
index bcc3e8e..b838950 100644
--- a/src/app/components/heading-card/heading-card.component.scss
+++ b/src/app/components/heading-card/heading-card.component.scss
@@ -1,28 +1,32 @@
-:host ::ng-deep {
-  .p-card-content {
-    padding: 0;
-  }
+:host {
+  width: 80%;
+  margin-bottom: 5vh;
+  display: block;
+}
 
-  .heading-card {
-    width: 80%;
-    display: inline-block;
-    margin-bottom: 5vh;
-  }
+.card {
+  border-radius: 20px;
+  width: 100%;
+  padding: 1.25rem;
+  display: inline-block;
+  text-align: center;
+}
 
-  .heading-card-light {
-    @extend .heading-card;
-  }
+.heading-card-light {
+  @extend .card;
+  background: white;
+  color: #4b5563;
+}
 
-  .heading-card-dark {
-    @extend .heading-card;
-    background: rgb(75,75,75);
-    color: white;
-  }
+.heading-card-dark {
+  @extend .card;
+  background: rgb(75,75,75);
+  color: white;
+}
 
-  .heading-card-3 {
-    @extend .heading-card;
-    background: #262626;
-    color: wheat;
-    border-radius: 20px;
-  }
+.heading-card-3 {
+  @extend .card;
+  background: #262626;
+  color: white;
+  border-radius: 20px;
 }
diff --git a/src/app/components/heading-card/heading-card.component.ts b/src/app/components/heading-card/heading-card.component.ts
index 0380b80..1bd9f41 100644
--- a/src/app/components/heading-card/heading-card.component.ts
+++ b/src/app/components/heading-card/heading-card.component.ts
@@ -1,12 +1,9 @@
 import {Component, Input} from '@angular/core';
-import {CardModule} from "primeng/card";
 
 @Component({
   selector: 'heading-card',
   standalone: true,
-  imports: [
-    CardModule
-  ],
+  imports: [],
   templateUrl: './heading-card.component.html',
   styleUrl: './heading-card.component.scss'
 })
diff --git a/src/app/components/skill-card/skill-card.component.html b/src/app/components/skill-card/skill-card.component.html
index edfc1e3..894a8d7 100644
--- a/src/app/components/skill-card/skill-card.component.html
+++ b/src/app/components/skill-card/skill-card.component.html
@@ -1,11 +1,19 @@
-<div class="container">
-  <div class="animation-container" (click)="rotated = !rotated" [class.card-rotated]="rotated">
+<div class="container" (click)="rotated = !rotated" [class.card-rotated]="rotated">
     <div class="card-content front">
       <circle-progress [value]="rating" max="100" text-format="percent"></circle-progress>
       <div class="skill-title">{{ name }}</div>
     </div>
-    <div class="card-content back" style="transform: rotateY(-180deg);">
+    <div class="card-content back">
       <span [innerHTML]="description"></span>
     </div>
-  </div>
 </div>
+
+<!-- TODO Add gradient to circle: https://github.com/tigrr/circle-progress/issues/8 -->
+
+<!--    <svg>-->
+<!--      &lt;!&ndash; Gradient (just need to insert in the <svg> tag. The ID must be unique) &ndash;&gt;-->
+<!--      <linearGradient id="linear-gradient">-->
+<!--        <stop offset="0%" stop-color="gold"/>-->
+<!--        <stop offset="100%" stop-color="teal"/>-->
+<!--      </linearGradient>-->
+<!--    </svg>-->
diff --git a/src/app/components/skill-card/skill-card.component.scss b/src/app/components/skill-card/skill-card.component.scss
index df43321..4766b7f 100644
--- a/src/app/components/skill-card/skill-card.component.scss
+++ b/src/app/components/skill-card/skill-card.component.scss
@@ -1,4 +1,18 @@
 :host {
+  // color vars:
+  // OLD:
+  --background: #000000;
+  --circle-background: white;
+  --circle-text: #cb1bd2;
+  --circle-stroke: #cb1bd2;
+
+  // Variant 1 NEW:
+  //--background: white;
+  //--circle-background: #262626;
+  //--circle-text: white;
+  //--circle-stroke: #cb1bd2;
+
+
   @for $i from 1 through 20 {
     &:nth-child(#{$i}) {
       --nth-child: #{$i};
@@ -17,20 +31,21 @@
   transition: all 0.3s ease-in-out;
   position: relative;
 
-  .animation-container {
-    height: 100%;
-    width: 100%;
-    transform-style: preserve-3d;
-    animation: rotate-back 1s ease-in-out forwards;
-    &.card-rotated {
-      animation: rotate 1s ease-in-out forwards;
-    }
+  transform-style: preserve-3d;
+  animation: rotate-back 1s ease-in-out forwards;
+  &.card-rotated {
+    animation: rotate 1s ease-in-out forwards;
   }
 
-
-
   &:hover {
-    transform: scale(1.2);
+    width: 13.2rem;
+    height: 20.4rem;
+    margin: -1.7rem -1.1rem;
+
+    .skill-title {
+      margin: 2.04rem 0 0;
+      font-size: 1.8rem;
+    }
 
     circle-progress::part(circle) {
       stroke-width: 0.2rem;
@@ -53,8 +68,9 @@
   height: 100%;
   width: 100%;
   position: absolute;
-  background: #000000;
-  border: 2px solid wheat;
+  //background: #000000;
+  background: var(--background);
+  border: 4px solid #262626;
   border-radius: 1.5rem;
   top: 0;
   left: 0;
@@ -63,6 +79,7 @@
   transition: all 0.3s ease-in-out;
 
   .skill-title {
+    transition: all 0.3s ease-in-out;
     text-align: center;
     margin: 1.7rem 0 0;
     font-size: 1.5rem;
@@ -77,6 +94,7 @@
     font-size: 0.8rem;
     text-align: justify;
     padding: 0.67rem;
+    transform: rotateY(-180deg);
     span {
       height: 100%;
       width: 100%;
@@ -102,22 +120,26 @@ circle-progress {
 
   &::part(value) {
     stroke-width: 0.4rem;
-    stroke: #cb1bd2;
+    //stroke: #cb1bd2;
+    stroke: var(--circle-stroke);
     stroke-linecap: round;
   }
 
   &::part(circle) {
-    stroke: #000000;
+    //stroke: #000000;
+    stroke: var(--background);
     stroke-width: 1rem;
     transition: all 0.3s ease-in-out;
-    fill: white;
+    //fill: white;
+    fill: var(--circle-background);
   }
 
   &::part(text) {
     //font-family: "Georgia", serif;
     font-weight: 600;
     font-size: 0.8rem;
-    fill: #cb1bd2;
+    //fill: #cb1bd2;
+    fill: var(--circle-text);
   }
 }
 
diff --git a/src/app/components/skills-card/skills-card.component.html b/src/app/components/skills-card/skills-card.component.html
index c673c88..63cb2a4 100644
--- a/src/app/components/skills-card/skills-card.component.html
+++ b/src/app/components/skills-card/skills-card.component.html
@@ -11,14 +11,3 @@ <h2 #title class="category-title">{{ category.name }}</h2>
     <skill-card #skills *ngFor="let skill of category.skills" [name]="skill.name" [description]="skill.text" [rating]="skill.rating"></skill-card>
   </div>
 </div>
-
-
-<!-- Add gradient: https://github.com/tigrr/circle-progress/issues/8 -->
-
-<!--    <svg>-->
-<!--      &lt;!&ndash; Gradient (just need to insert in the <svg> tag. The ID must be unique) &ndash;&gt;-->
-<!--      <linearGradient id="linear-gradient">-->
-<!--        <stop offset="0%" stop-color="gold"/>-->
-<!--        <stop offset="100%" stop-color="teal"/>-->
-<!--      </linearGradient>-->
-<!--    </svg>-->
diff --git a/src/app/components/timeline-card/timeline-card.component.html b/src/app/components/timeline-card/timeline-card.component.html
index b203a90..b605127 100644
--- a/src/app/components/timeline-card/timeline-card.component.html
+++ b/src/app/components/timeline-card/timeline-card.component.html
@@ -1,8 +1,9 @@
-<p-card [header]="heading" [subheader]="subheading"
-        [styleClass]="cardStyleClass">
-  <div [innerHTML]="content" style="margin-top: 1rem"></div>
-  <div *ngIf="bulletPoints" style="margin-top: 1rem">
+<div [class]="cardStyleClass">
+  <h3 class="heading" [innerHTML]="heading"></h3>
+  <h4 class="subheading" [innerHTML]="subheading"></h4>
+  <div class="content" [innerHTML]="content"></div>
+  <div class="bullet-point-container" *ngIf="bulletPoints">
     <p-badge *ngFor="let bulletPoint of bulletPoints" [value]="bulletPoint"
              [style]="{'margin': '0 0.3vh', 'background': 'rgba(75,85,93,0.7)'}"></p-badge>
   </div>
-</p-card>
+</div>
diff --git a/src/app/components/timeline-card/timeline-card.component.scss b/src/app/components/timeline-card/timeline-card.component.scss
index 679f22b..bfe1f8d 100644
--- a/src/app/components/timeline-card/timeline-card.component.scss
+++ b/src/app/components/timeline-card/timeline-card.component.scss
@@ -1,30 +1,42 @@
-:host ::ng-deep {
-  .p-card-content {
-    padding: 0;
-  }
+.card {
+  margin-bottom: 3vh;
+  border-radius: 20px;
+  padding: 1.25rem;
+}
 
-  .timeline-card {
-    margin-bottom: 3vh;
+.timeline-card-light {
+  @extend .card;
+  background: white;
+  color: #4b5563;
+  .subheading {
+    color: #6b7280;
   }
+}
 
-  .timeline-card-light {
-    @extend .timeline-card;
-    border: var(--border-dark);
-    background: var(--background-light);
+.timeline-card-dark {
+  @extend .card;
+  background: rgb(75,75,75);
+  color: #dcdcdc;
+  .subheading {
+    color: #dedede;
   }
+}
 
-  .timeline-card-dark {
-    @extend .timeline-card;
-    border: var(--border-light);
-    background: var(--background-dark);
-    color: #dcdcdc;
+.heading {
+  margin: 0 0 .5rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
 
-    & > div.p-card-body > div.p-card-title {
-      color: white;
-    }
+.subheading {
+  font-weight: 400;
+  margin: 0 0 .5rem;
+}
 
-    & > div.p-card-body > div.p-card-subtitle {
-      color: #ffffff;
-    }
-  }
+.content {
+  margin-top: 1rem;
+}
+
+.bullet-point-container {
+  margin-top: 1rem;
 }
diff --git a/src/app/js/lenis 2.js b/src/app/js/lenis 2.js
deleted file mode 100644
index c34bdbe..0000000
--- a/src/app/js/lenis 2.js	
+++ /dev/null
@@ -1,15 +0,0 @@
-import Lenis from '@studio-freight/lenis';
-import {ScrollTrigger} from "gsap/ScrollTrigger";
-import gsap from 'gsap';
-
-const lenis = new Lenis();
-
-lenis.on('scroll', ScrollTrigger.update);
-
-gsap.ticker.add((time)=>{
-  lenis.raf(time * 1000);
-});
-
-gsap.ticker.lagSmoothing(0);
-
-console.log("Lenis installed.")
diff --git a/src/styles.scss b/src/styles.scss
index d2429fe..e8a9b82 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -37,10 +37,10 @@ html {
   .text-color-grey-medium-1 { color: var(--color-grey-medium-1); }
   .color-white-darker { color: var(--color-white-darker); }
 
-  --border-light: 1px solid #7a7a7a;
-  --border-dark: 1px solid #232323;
-  --background-light: rgba(255, 255, 255, 0.8);
-  --background-dark: rgba(75, 75, 75, 0.9);
+  //--border-light: 1px solid #7a7a7a;
+  //--border-dark: 1px solid #232323;
+  //--background-light: rgba(255, 255, 255, 0.8);
+  //--background-dark: rgba(75, 75, 75, 0.9);
 
   @media (max-width: 1000px) {
     --main-content-width: 100vw;