diff --git a/src/app/constants/AssetsConstants.ts b/src/app/constants/AssetsConstants.ts
index 4727ef3..adaebc7 100644
--- a/src/app/constants/AssetsConstants.ts
+++ b/src/app/constants/AssetsConstants.ts
@@ -13,4 +13,22 @@
   static readonly TERAPORT_LOGO = '/assets/logos/teraport_gmbh_logo.jpg';
 
   static readonly CV: 'assets/cv/andreas-dahm-cv.pdf';
+
+  //project images
+  static readonly EL_MUCHO_1 = '/assets/projects/el-mucho/1.jpg';
+  static readonly EL_MUCHO_2 = '/assets/projects/el-mucho/2.jpg';
+  static readonly EL_MUCHO_3 = '/assets/projects/el-mucho/3.jpg';
+  static readonly EL_MUCHO_4 = '/assets/projects/el-mucho/4.jpg';
+
+  static readonly GAME_JAMS_1 = '/assets/projects/game-jams/1.png';
+  static readonly GAME_JAMS_2 = '/assets/projects/game-jams/2.png';
+  static readonly GAME_JAMS_3 = '/assets/projects/game-jams/3.png';
+
+  static readonly DIPLOMA_1 = '/assets/projects/diploma/1.jpg';
+  static readonly DIPLOMA_2 = '/assets/projects/diploma/2.jpg';
+  static readonly DIPLOMA_3 = '/assets/projects/diploma/3.jpg';
+  static readonly DIPLOMA_4 = '/assets/projects/diploma/4.jpg';
+  static readonly DIPLOMA_5 = '/assets/projects/diploma/5.jpg';
+  static readonly DIPLOMA_6 = '/assets/projects/diploma/6.jpg';
+
 }
diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
index 8c816ba..8879f5a 100644
--- a/src/app/pages/about/about.component.html
+++ b/src/app/pages/about/about.component.html
@@ -47,7 +47,7 @@
       <div>
         <h3>{{ 'ABOUT.SECTION.PRIMARY' | translate }}</h3>
         <mat-chip-set aria-label="Primary skills">
-          @for (s of primarySkills; track primarySkills)          {
+          @for (s of primarySkills; track s) {
             <mat-chip >{{ s | translate }}</mat-chip>
           }
         </mat-chip-set>
@@ -56,7 +56,7 @@
       <div>
         <h3>{{ 'ABOUT.SECTION.TOOLSET' | translate }}</h3>
         <mat-chip-set aria-label="Toolset">
-          @for (t of toolset; track toolset)          {
+          @for (t of toolset; track t)          {
             <mat-chip>{{ t | translate }}</mat-chip>
           }
         </mat-chip-set>
@@ -67,7 +67,7 @@
   <mat-card class="experience">
     <h2>{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
     <div class="xp-list">
-      @for (entry of xpKeys; track entry) {
+      @for (entry of xpKeys; track entry.key) {
         <div class="xp-item">
           <div class="xp-head-grid">
             <div class="logo-wrap">
@@ -108,7 +108,7 @@
     <h2>{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
 
     <div class="xp-list">
-      @for (entry of projectKeys; track entry) {
+      @for (entry of projectKeys; track entry.key) {
       <div class="xp-item">
         <div class="head-row">
           <strong>{{ (entry.key + '.TITLE') | translate }}</strong>
@@ -116,18 +116,21 @@
         <div class="company-row">
           {{ (entry.key + '.DESCRIPTION') | translate }}
         </div>
+        @if (entry.externalLink) {
+          <div class="link-row">
+            <a class="link-with-icon"
+               href="{{entry.externalLink}}"
+               target="_blank"
+               rel="noopener noreferrer">
+              <mat-icon>open_in_new</mat-icon>
+              {{ (entry.key + '.LINK_EXTERNAL') | translate }}
+            </a>
+          </div>
+        }
         <div class="link-row">
           <a class="link-with-icon"
-             href="{{entry.externalLink}}"
-             target="_blank"
-             rel="noopener noreferrer">
-            <mat-icon>open_in_new</mat-icon>
-            {{ (entry.key + '.LINK_EXTERNAL') | translate }}
-          </a>
-        </div>
-        <div class="link-row">
-          <a class="link-with-icon"
-             href="{{entry.internalLink}}"
+             [routerLink]="['/projects']"
+             [queryParams]="{ project: entry.identifier }"
              rel="noopener noreferrer">
             <mat-icon>link</mat-icon>
             {{ (entry.key + '.LINK_INTERNAL') | translate }}
@@ -155,7 +158,7 @@
 
     <div class="xp-list">
       <div class="xp-item">
-        @for (entry of educationKeys; track entry) {
+        @for (entry of educationKeys; track entry.key) {
           <div class="head-row">
             <strong>{{ (entry.key + '.WHERE') | translate }}</strong>
             <span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
diff --git a/src/app/pages/about/about.component.ts b/src/app/pages/about/about.component.ts
index 0198751..1c7b1d8 100644
--- a/src/app/pages/about/about.component.ts
+++ b/src/app/pages/about/about.component.ts
@@ -8,6 +8,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { TranslateModule } from '@ngx-translate/core';
 import {UrlConstants} from '../../constants/UrlConstants';
 import {AssetsConstants} from '../../constants/AssetsConstants';
+import {RouterLink} from '@angular/router';
 
 
 @Component({
@@ -20,8 +21,9 @@ import {AssetsConstants} from '../../constants/AssetsConstants';
     MatIconModule,
     MatButtonModule,
     MatDividerModule,
-    TranslateModule
-],
+    TranslateModule,
+    RouterLink
+  ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'
 })
@@ -71,17 +73,26 @@ export class AboutComponent {
     {
       key: 'ABOUT.PROJECT.P2',
       externalLink: 'https://andreas-dahm.eu/',
-      internalLink: 'projects'
+      internalLink: 'projects',
+      identifier: 'playground',
     },
     {
       key: 'ABOUT.PROJECT.P1',
       externalLink: 'https://store.steampowered.com/app/1532640/El_Mucho/',
-      internalLink: 'projects'
+      internalLink: 'projects',
+      identifier: 'elmucho',
     },
     {
       key: 'ABOUT.PROJECT.P0',
       externalLink: 'https://itch.io/c/6628860/lobos-collection',
-      internalLink: 'projects'
+      internalLink: 'projects',
+      identifier: 'gamejams',
+    },
+    {
+      key: 'ABOUT.PROJECT.DIPLOMA',
+      externalLink: '',
+      internalLink: 'projects',
+      identifier: 'diploma',
     }
   ];
 
diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html
index ddcf4ce..b97aaeb 100644
--- a/src/app/pages/projects/projects.component.html
+++ b/src/app/pages/projects/projects.component.html
@@ -1,6 +1,22 @@
-<div class="wip">
-  <div class="dots">
-    <span></span><span></span><span></span>
-  </div>
-  <p>Work in progress…</p>
-</div>
+<mat-accordion class="project-headers-align">
+  @for (project of allProjects; track project) {
+    <mat-expansion-panel [expanded]="isExpanded(project.identifier)">
+      <mat-expansion-panel-header>
+        <mat-panel-title>{{ project.title | translate }}</mat-panel-title>
+        <mat-panel-description>
+          {{ project.shortDescription | translate}}
+          <mat-icon>{{ project.icon }}</mat-icon>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <p>{{ project.introduction | translate }}</p>
+      @if (project.images.length > 0)
+      {
+        <div class="gallery">
+          @for (img of project.images; track img) {
+            <img class="gallery-img" [src]="img" [alt]="project.title | translate" />
+          }
+        </div>
+      }
+    </mat-expansion-panel>
+  }
+</mat-accordion>
diff --git a/src/app/pages/projects/projects.component.scss b/src/app/pages/projects/projects.component.scss
index 56ce4f9..325d60d 100644
--- a/src/app/pages/projects/projects.component.scss
+++ b/src/app/pages/projects/projects.component.scss
@@ -1,29 +1,21 @@
-.wip {
-  display: flex;
-  flex-direction: column;
+.project-headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
   align-items: center;
-  gap: .75rem;
-  padding: 2rem;
-  opacity: .9;
 }
 
-.dots {
-  display: flex;
-  gap: .5rem;
+.project-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+  margin-left: 8px;
 }
 
-.dots span {
-  width: 10px;
-  height: 10px;
-  background: var(--app-fg);
-  border-radius: 50%;
-  animation: pulse 1.4s infinite ease-in-out;
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
+  gap: 12px;
 }
 
-.dots span:nth-child(2) { animation-delay: .2s; }
-.dots span:nth-child(3) { animation-delay: .4s; }
-
-@keyframes pulse {
-  0%, 80%, 100% { opacity: .3; transform: scale(1); }
-  40% { opacity: 1; transform: scale(1.4); }
+.gallery-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 16px;
 }
diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts
index 2b83d2e..381883a 100644
--- a/src/app/pages/projects/projects.component.ts
+++ b/src/app/pages/projects/projects.component.ts
@@ -1,11 +1,80 @@
-import { Component } from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
+import {MatAccordion, MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelHeader, MatExpansionPanelTitle} from '@angular/material/expansion';
+import {MatIcon} from '@angular/material/icon';
+import {TranslatePipe} from '@ngx-translate/core';
+import {ActivatedRoute} from '@angular/router';
+import {AssetsConstants} from '../../constants/AssetsConstants';
+
+export interface Projects {
+  identifier: string;
+  title: string,
+  shortDescription: string,
+  introduction: string,
+  images: string[],
+  icon: string,
+}
 
 @Component({
   selector: 'app-projects',
-  imports: [],
+  imports: [
+    MatAccordion,
+    MatExpansionPanel,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatIcon,
+    TranslatePipe,
+  ],
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss',
 })
 export class ProjectsComponent {
 
+    private readonly route = inject(ActivatedRoute);
+    selectedKey = signal<string | null>(null);
+
+    allProjects: Projects[] = [
+      {
+        identifier: "playground",
+        title: 'PROJECTS.PLAYGROUND.TITLE',
+        shortDescription: 'PROJECTS.PLAYGROUND.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.PLAYGROUND.INTRODUCTION',
+        images: [],
+        icon: 'web'
+      },
+      {
+        identifier: "elmucho",
+        title: 'PROJECTS.EL_MUCHO.TITLE',
+        shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
+        images: [AssetsConstants.EL_MUCHO_1, AssetsConstants.EL_MUCHO_2, AssetsConstants.EL_MUCHO_3, AssetsConstants.EL_MUCHO_4],
+        icon: 'sports_esports'
+      },
+      {
+        identifier: "gamejams",
+        title: 'PROJECTS.GAME_JAMS.TITLE',
+        shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
+        images: [AssetsConstants.GAME_JAMS_1, AssetsConstants.GAME_JAMS_2, AssetsConstants.GAME_JAMS_3],
+        icon: 'videogame_asset'
+      },
+      {
+        identifier: "diploma",
+        title: 'PROJECTS.DIPLOMA.TITLE',
+        shortDescription: 'PROJECTS.DIPLOMA.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
+        images: [AssetsConstants.DIPLOMA_1, AssetsConstants.DIPLOMA_2, AssetsConstants.DIPLOMA_3, AssetsConstants.DIPLOMA_4, AssetsConstants.DIPLOMA_5, AssetsConstants.DIPLOMA_6],
+        icon: 'history_edu'
+      }
+    ]
+
+  constructor() {
+    this.route.queryParamMap.subscribe(params => {
+      this.selectedKey.set(params.get('project'));
+    });
+  }
+
+  isExpanded(projectKey: string): boolean {
+    return this.selectedKey() === projectKey;
+  }
 }
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 9028331..eea920a 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -176,6 +176,16 @@
           "P2": "Lernen, fokussiert und effizient unter strengen Zeitvorgaben zu arbeiten.",
           "P3": "Die Freude zu erleben, in kurzer Zeit ein spielbares Projekt zu erstellen und andere damit spielen zu sehen."
         }
+      },
+      "DIPLOMA": {
+        "TITLE": "Diplomarbeit - Kollisionserkennung und Behandlung von komplexen Kleidungsstücken.",
+        "DESCRIPTION": "Die Diplomarbeit handelt von der Erkennung und der Behandlung von Kollisionen zwischen, sowie innerhalb, einzelnen Kleidungsstücken in Echtzeit. Das ist gerade aufgrund der Flexibilität von Stoffen und deren unterschiedlichen Eigenschaften besonders herausfordernd.",
+        "LINK_INTERNAL": "Projektdetails",
+        "HIGHLIGHTS": {
+          "P1": "Echtzeit behandlung von Kollisionserkennung und Behandlung.",
+          "P2": "Verstehen und Einschätzen von wissenschaftlichen Arbeiten.",
+          "P3": "Adaption und Weiterentwicklung von vorausgegangenen Forschungsarbeiten."
+        }
       }
     },
     "EDUCATION": {
@@ -215,5 +225,27 @@
         "WHAT": "Kein Abschluss. Wechsel zur Hauptschule"
       }
     }
+  },
+  "PROJECTS": {
+    "PLAYGROUND": {
+      "TITLE": "Playground Website",
+      "SHORT_DESCRIPTION": "Hier geht es um diese Webseite.",
+      "INTRODUCTION": "Dieses Projekt ist hauptsächlich als eine Art 'Spielwiese' gestartet, daher der Name. Es ist geplant, die Seite mit der Zeit weiter auszubauen. Dabei werden hier neue Projekte auftauchen, oder ich werde die Seite an für sich weiter ausbauen, weil ich neue Sachen im Rahmen von Web Technologien ausprobieren möchte."
+    },
+    "EL_MUCHO": {
+      "TITLE": "El Mucho",
+      "SHORT_DESCRIPTION": "Hier geht es um mein ersten Spiel auf Steam.",
+      "INTRODUCTION": "El Mucho ist ein rundenbasiertes taktisches RPG in einer fiktiven Welt namens Liberika. Es ist angelehnt an alte Klassiker wie Langrisser aka Warsong. In El Mucho geht es darum, die Welt gegen die Angriffe der fiesen Monster zu verteidigen."
+    },
+    "GAME_JAMS": {
+      "TITLE": "Game Jams",
+      "SHORT_DESCRIPTION": "Hier geht es meine Teilnahme an mehreren Game Jams.",
+      "INTRODUCTION": "Da ich mich für die Entwicklung von Spielen interessiert, sind Game Jams für mich optimal, um fokussiert an neuen Ideen zu arbeiten und dabei Prototypen zu entwickeln, um zu sehen, ob Spielideen funktionieren oder nicht. In den letzten Jahren habe ich an einigen Game Jams teilgenommen und fasse das hier zusammen."
+    },
+    "DIPLOMA": {
+      "TITLE": "Diplomarbeit",
+      "SHORT_DESCRIPTION": "Kollisionserkennung und Behandlung von komplexen Kleidungsstücken.",
+      "INTRODUCTION": "Die Diplomarbeit handelt von der Erkennung und der Behandlung von Kollisionen zwischen, sowie innerhalb, einzelnen Kleidungsstücken in Echtzeit. Das ist gerade aufgrund der Flexibilität von Stoffen und deren unterschiedlichen Eigenschaften besonders herausfordernd."
+    }
   }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index c26cc5c..5ceb91a 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -166,6 +166,16 @@
           "P2": "Learning to stay focused and work effectively under strict time constraints.",
           "P3": "Experiencing the joy of creating a playable game in a short timeframe and seeing others enjoy it."
         }
+      },
+      "DIPLOMA": {
+        "TITLE": "Diploma thesis - Collision detection and handling of complex garments.",
+        "DESCRIPTION": "The thesis deals with the detection and handling of collisions between and within individual items of clothing in real time. This is particularly challenging due to the flexibility of fabrics and their varying properties.",
+        "LINK_INTERNAL": "Project details",
+        "HIGHLIGHTS": {
+          "P1": "Real-time handling of collision detection and response.",
+          "P2": "Understanding and evaluating scientific papers.",
+          "P3": "Adaptation and further development of previous research work."
+        }
       }
     },
     "EDUCATION": {
@@ -205,5 +215,27 @@
         "WHAT": "No degree (transferred to lower secondary school)"
       }
     }
+  },
+  "PROJECTS": {
+    "PLAYGROUND": {
+      "TITLE": "Playground Website",
+      "SHORT_DESCRIPTION": "This is about this website.",
+      "INTRODUCTION": "This project was mainly started as a kind of “playground”, hence the name. The plan is to expand the site over time. New projects will appear here, or I will continue to expand the site itself because I want to try out new things in the field of web technologies."
+    },
+    "EL_MUCHO": {
+      "TITLE": "El Mucho",
+      "SHORT_DESCRIPTION": "This is about my first game on steam.",
+      "INTRODUCTION": "El Mucho is a turn-based tactical RPG set in a fictional world called Liberika. It is inspired by old classics such as Langrisser, also known as Warsong. El Mucho is about defending the world against attacks from nasty monsters."
+    },
+    "GAME_JAMS": {
+      "TITLE": "Game Jams",
+      "SHORT_DESCRIPTION": "This is about my participation at several game jams.",
+      "INTRODUCTION": "Since I am interested in game development, game jams are ideal for me to focus on new ideas and develop prototypes to see whether game ideas work or not. I have participated in several game jams over the past few years and summarise my experiences here."
+    },
+    "DIPLOMA": {
+      "TITLE": "Diploma thesis",
+      "SHORT_DESCRIPTION": "Collision detection and handling of complex garments.",
+      "INTRODUCTION": "The thesis deals with the detection and handling of collisions between and within individual items of clothing in real time. This is particularly challenging due to the flexibility of fabrics and their varying properties."
+    }
   }
 }
diff --git a/src/assets/projects/diploma/1.jpg b/src/assets/projects/diploma/1.jpg
new file mode 100644
index 0000000..23f1839
Binary files /dev/null and b/src/assets/projects/diploma/1.jpg differ
diff --git a/src/assets/projects/diploma/2.jpg b/src/assets/projects/diploma/2.jpg
new file mode 100644
index 0000000..a99c2e6
Binary files /dev/null and b/src/assets/projects/diploma/2.jpg differ
diff --git a/src/assets/projects/diploma/3.jpg b/src/assets/projects/diploma/3.jpg
new file mode 100644
index 0000000..d2ae4ea
Binary files /dev/null and b/src/assets/projects/diploma/3.jpg differ
diff --git a/src/assets/projects/diploma/4.jpg b/src/assets/projects/diploma/4.jpg
new file mode 100644
index 0000000..3b79b09
Binary files /dev/null and b/src/assets/projects/diploma/4.jpg differ
diff --git a/src/assets/projects/diploma/5.jpg b/src/assets/projects/diploma/5.jpg
new file mode 100644
index 0000000..c349ffa
Binary files /dev/null and b/src/assets/projects/diploma/5.jpg differ
diff --git a/src/assets/projects/diploma/6.jpg b/src/assets/projects/diploma/6.jpg
new file mode 100644
index 0000000..9ed8a60
Binary files /dev/null and b/src/assets/projects/diploma/6.jpg differ
diff --git a/src/assets/projects/el-mucho/1.jpg b/src/assets/projects/el-mucho/1.jpg
new file mode 100644
index 0000000..cf5c335
Binary files /dev/null and b/src/assets/projects/el-mucho/1.jpg differ
diff --git a/src/assets/projects/el-mucho/2.jpg b/src/assets/projects/el-mucho/2.jpg
new file mode 100644
index 0000000..cc39bdf
Binary files /dev/null and b/src/assets/projects/el-mucho/2.jpg differ
diff --git a/src/assets/projects/el-mucho/3.jpg b/src/assets/projects/el-mucho/3.jpg
new file mode 100644
index 0000000..49d0e9a
Binary files /dev/null and b/src/assets/projects/el-mucho/3.jpg differ
diff --git a/src/assets/projects/el-mucho/4.jpg b/src/assets/projects/el-mucho/4.jpg
new file mode 100644
index 0000000..f44814c
Binary files /dev/null and b/src/assets/projects/el-mucho/4.jpg differ
diff --git a/src/assets/projects/game-jams/1.png b/src/assets/projects/game-jams/1.png
new file mode 100644
index 0000000..fa67099
Binary files /dev/null and b/src/assets/projects/game-jams/1.png differ
diff --git a/src/assets/projects/game-jams/2.png b/src/assets/projects/game-jams/2.png
new file mode 100644
index 0000000..cbc4e1e
Binary files /dev/null and b/src/assets/projects/game-jams/2.png differ
diff --git a/src/assets/projects/game-jams/3.png b/src/assets/projects/game-jams/3.png
new file mode 100644
index 0000000..29ee336
Binary files /dev/null and b/src/assets/projects/game-jams/3.png differ
diff --git a/src/styles.scss b/src/styles.scss
index 38543ce..3d73efa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -143,3 +143,53 @@ a {
   transform: translateY(-2px);
   box-shadow: var(--card-shadow-hover);
 }
+
+/* accordion */
+/* expansion panels like cards */
+.mat-accordion {
+  display: grid;
+  gap: 8px;
+}
+
+.mat-accordion .mat-expansion-panel {
+  border-radius: var(--card-radius) !important;
+  background: var(--card-bg) !important;
+  overflow: hidden; /* ok */
+  border: none !important;
+}
+
+.mat-accordion .mat-expansion-panel:hover {
+  box-shadow: var(--card-shadow-hover) !important;
+  transform: translateY(-2px);
+
+}
+
+.mat-accordion .mat-expansion-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+
+  box-shadow:
+    inset 0 1px 0 var(--card-border-inset),
+    inset 0 -1px 0 var(--card-border-inset-dark);
+}
+
+.mat-accordion .mat-expansion-panel::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none;
+
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+.mat-expansion-panel-header {
+  background: transparent !important;
+}
+
+.mat-expansion-panel-body {
+  padding-top: 0;
+}