diff --git a/public/Empty.png b/public/Empty.png
new file mode 100644
index 0000000..37fbfb1
Binary files /dev/null and b/public/Empty.png differ
diff --git a/public/Quiz 2.jpeg b/public/Quiz 2.jpeg
new file mode 100644
index 0000000..d120241
Binary files /dev/null and b/public/Quiz 2.jpeg differ
diff --git a/public/Quiz 3.jpeg b/public/Quiz 3.jpeg
new file mode 100644
index 0000000..dc5d4f3
Binary files /dev/null and b/public/Quiz 3.jpeg differ
diff --git a/public/Supplier Recognition - Demo.png b/public/Supplier Recognition - Demo.png
index 9f64bea..9729ae8 100644
Binary files a/public/Supplier Recognition - Demo.png and b/public/Supplier Recognition - Demo.png differ
diff --git a/public/Supplier Recognition - Demo2.png b/public/Supplier Recognition - Demo2.png
deleted file mode 100644
index 9729ae8..0000000
Binary files a/public/Supplier Recognition - Demo2.png and /dev/null differ
diff --git a/public/Top Secret White.png b/public/Top Secret White.png
new file mode 100644
index 0000000..aa1b0ac
Binary files /dev/null and b/public/Top Secret White.png differ
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 790b840..84b73ef 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,6 +6,13 @@
   <app-projects></app-projects>
   <app-contact></app-contact>
 </main>
+<!-- <a 
+    href="#header"
+    class="bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 focus:outline-none fade-up-in"
+    aria-label="Scroll to top"
+  >
+    <i class="bi bi-arrow-up"></i>
+  </a> -->
 
 <footer class="bg-gray-800 text-white text-center py-4">
   <p>&copy; 2024 Ian Vink. All rights reserved.</p>
diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
index b0ce1bd..6dd31f4 100644
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -4,8 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-contact',
   standalone: true,
   imports: [],
-  templateUrl: './contact.component.html',
-  styleUrl: './contact.component.scss'
+  templateUrl: './contact.component.html'
 })
 export class ContactComponent {
 
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 2e67ac4..a3a88d2 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,4 +1,4 @@
-<header class="bg-gray-800 text-white py-6 relative z-50">
+<header id="header" class="bg-gray-800 text-white py-6 relative z-50">
   <div class="container mx-auto px-4">
     <div class="flex justify-between items-center">
       <div class="text-2xl font-bold">Vink Development</div>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index d9ce5ef..e26fe2f 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -10,8 +10,7 @@ interface MenuItem {
   selector: 'app-header',
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
+  templateUrl: './header.component.html'
 })
 export class HeaderComponent {
   menuItems: MenuItem[] = [];
diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html
index 77667a0..8ec8f3b 100644
--- a/src/app/projects/projects.component.html
+++ b/src/app/projects/projects.component.html
@@ -2,17 +2,16 @@
   <div class="container mx-none px-2 md:px-4 lg:px-6">
     <h2 class="text-4xl font-semibold text-center mb-12 fade-in-left winged-14">Projects</h2>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
       <div *ngFor="let project of projects"
-        class="backface-hidden rounded-sm overflow-hidden shadow-lg hover:scale-105 transition-all 
-        duration-300 group relative fade-in-up bg-white/5 border-none ">
-        <!-- no backdrop-blur, that causes the text to go blurry as well -->
+        class="backface-hidden rounded-sm overflow-hidden shadow-lg md:hover:scale-105 transition-all 
+        duration-300 group relative fade-in-up bg-white/5 border-none">
+        <!-- alt="{{project.title}}" -->
+        <!-- *ngIf="project.image"  -->
         <img src="{{project.image}}" alt="{{project.title}}" class="w-full max-h-56 aspect-[3/2] object-cover">
-        <div class="p-2 xs:p-3 xl:px-6">
+        <div class="p-2 xs:p-3 xl:px-6 min-h-56">
           <div class="flex flex-wrap mb-2 xs:mb-4 items-center">
-            <!-- justify-center -->
             <h3 class="text-xl sm:text-2xl font-semibold text-teal-400 flex-grow">{{project.title}}</h3>
-            <!-- font-semibold -->
             <p class="pl-2 ml-auto w-auto text-right text-sm xs:text-base text-gray-400">{{project.year}}</p>
           </div>
           <p class="text-gray-300 mb-4 whitespace-pre-line">{{project.description}}</p>
@@ -24,36 +23,4 @@
       </div>
     </div>
   </div>
-</section>
-
-
-
-
-
-
-
-
-<!-- <section id="projects" class="py-16 bg-gray-800 text-white">
-  <div class="container mx-auto px-6">
-    <h2 class="text-4xl font-semibold text-center mb-12 fade-in-left winged-14">Projects</h2>
-
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-      <div *ngFor="let project of projects"
-        class="backface-hidden rounded-md overflow-hidden shadow-lg hover:scale-105 transition-all 
-        duration-300 group relative fade-in-up bg-white/5 border-none ">
-        <img src="{{project.image}}" alt="{{project.title}}" class="w-full h-56 object-cover">
-        <div class="p-6">
-          <div class="flex justify-between">
-            <h3 class="text-2xl font-semibold text-teal-400 mb-4">{{project.title}}</h3>
-            <p class="pl-1">{{project.year}}</p>
-          </div>
-          <p class="text-gray-300 mb-4 whitespace-pre-line">{{project.description}}</p>
-          <div class="flex flex-wrap gap-2">
-            <span *ngFor="let technology of project.technologies"
-              class="bg-gray-800 text-white text-sm px-2 py-1 rounded-md">{{technology}}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section> -->
\ No newline at end of file
+</section>
\ No newline at end of file
diff --git a/src/app/projects/projects.component.scss b/src/app/projects/projects.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts
index 59f536f..b2893ca 100644
--- a/src/app/projects/projects.component.ts
+++ b/src/app/projects/projects.component.ts
@@ -12,19 +12,72 @@ interface Project {
 @Component({
   selector: 'app-projects',
   imports: [CommonModule],
-  templateUrl: './projects.component.html',
-  styleUrl: './projects.component.scss',
+  templateUrl: './projects.component.html'
 })
 export class ProjectsComponent {
   projects: Project[] = [];
 
   constructor() {
+    this.projects.push({
+      title: 'Quiz App',
+      year: '2024',
+      description:
+        'A little quiz game, using questions from the Open Trivia Database. This API only allows one request per 5 seconds. ' + 
+        '\n\nTo combat this, the app collects all available questions in its own database. ' +  
+        'To ensure the data stays fresh, it repeats this process every night, by creating a backup table, and then swapping it with the active one once it is finished. ' +
+        '\n\nDocker is used for the development and deployment. The app is self-hosted, the link can be found below.',
+      image: 'Quiz 3.jpeg',
+      technologies: [
+        'Angular',
+        // 'Sass',
+        'Tailwind',
+        'Spring Boot',
+        'Docker',
+        'Linux',
+        'Nginx',
+        'Gitea Workflows'
+      ],
+    });
+    this.projects.push({
+      title: 'Mobile-first ERP solution',
+      year: '2021-2024',
+      description:
+        `This is a comprehensive ERP solution that includes modules for a variety of functions, such as:
+
+          • Declarations (Cost, Time, Travel, Sick Leave, and Holidays)
+          • HRM (Employee Management, Contracts)
+          • Sales (Relations, Contacts, Leads, Deals, Aftersales)
+          • Project Management
+          • Administration (Permission and User Management)
+            …and much more.
+          \nThe entire application is multilingual, and each component is designed to be fully responsive, ensuring a smooth experience on both large and small screens.
+          \nThe application undergoes thorough testing, including unit tests, integration tests, and end-to-end tests. Deployments are rolled out in stages to catch potential bugs before going live.`,
+
+        // 'A full-fledged ERP solution, with modules for declarations (such as Cost, Time, Travel, Sickleave and Holidays), HRM (Managing employees), Sales (Relations, Contacts, Leads, Deals, Aftersales), Projectmanagement, Administration (Permission management, User management), and many more. ' +
+        // '\n\nThe entire application is multi-lingual, with a system developed to enable multiple people add translations without causes merge errors. Every component is crafted in such a way that it supports both big and small screens. The application is throuroughly tested, with unittests, integrationtests and end-to-end tests. Deployments happen in stages, to ensure bugs are caught before going live.',
+      image: 'Top Secret White.png',
+      technologies: [
+        'Angular',
+        'Sass',
+        'i18n',
+        'Playwright',
+        'Java EE',
+        'JUnit',
+        'PostgreSQL',
+        'Linux',
+        'Jenkins',
+        'Nginx',
+        'UML',
+        'Scrum',
+        'Kanban'
+      ],
+    });
     this.projects.push({
       title: 'AI supplier identification',
       year: '2021',
       description:
         'An application that combines key-value detection and multiclass-classification, to identify the correct supplier for an invoice. It uses online machine learning to keep improving itself as the user provides feedback.',
-      image: 'Supplier Recognition - Demo2.png',
+      image: 'Supplier Recognition - Demo.png',
       technologies: [
         'Angular (Typescript, HTML, CSS)',
         'ASP.NET Core (C#)',
@@ -37,9 +90,9 @@ export class ProjectsComponent {
       title: 'Seabed modification tool',
       year: '2019-2020',
       description:
-        'A tool to edit the seabed mesh of a maritime simulator. The collisionmap is also updated, to allow ships to interact with this update terrain. \nThis tool allows instructors to rapidly create new terrain, for training shipcrews',
+        'A tool to edit the seabed mesh of a maritime simulator. The collisionmap is also updated, to allow ships to interact with this update terrain. \nThis tool allows instructors to rapidly create new terrain, for training shipcrews.',
       image: 'Seabed Modification.png',
-      technologies: ['Unigine (C#)', 'AGC Dynamics (C++)', 'Qt Creator'],
+      technologies: ['Unigine (C#)', 'AGX Dynamics (C++)', 'Qt Creator'],
     });
     this.projects.push({
       title: 'Flow Field pathfinding algorithm',
@@ -68,7 +121,7 @@ export class ProjectsComponent {
         'ATmega128',
         '7-segment display',
         'Dot-matrix displays',
-        'Group project'
+        'Group project',
       ],
     });
     this.projects.push({
@@ -79,5 +132,13 @@ export class ProjectsComponent {
       image: 'AR Game.png',
       technologies: ['C++', 'OpenCV', 'OpenGL', 'IrrKlang', 'Group project'],
     });
+    this.projects.push({
+      title: 'Your dream project here?',
+      year: '',
+      description:
+        '',
+      image: 'Empty.png',
+      technologies: [],
+    });
   }
 }
diff --git a/src/app/skills/skills.component.scss b/src/app/skills/skills.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/skills/skills.component.ts b/src/app/skills/skills.component.ts
index 723aadc..d254c82 100644
--- a/src/app/skills/skills.component.ts
+++ b/src/app/skills/skills.component.ts
@@ -10,8 +10,7 @@ interface Category {
   selector: 'app-skills',
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './skills.component.html',
-  styleUrl: './skills.component.scss',
+  templateUrl: './skills.component.html'
 })
 export class SkillsComponent {
   frontend: Category = { title: 'Frontend', skills: [] };