diff --git a/src/app/app.css b/src/app/app.css
index e460d2e..6d2ef74 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -40,7 +40,7 @@
   color: #ffb57e;
   font-size: 14px;
   font-weight: 500;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   padding: 6px 16px;
   border-radius: 20px;
   width: fit-content;
@@ -50,7 +50,7 @@
 
 .hero-title {
   font-family: 'Google Sans', sans-serif;
-  font-size: 70px;
+  font-size: 50px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--mat-sys-onSurface);
@@ -62,7 +62,7 @@
   font-size: 24px;
   line-height: 1.6;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   margin: 0;
   max-width: 480px;
 }
@@ -81,7 +81,7 @@
   border-radius: 50px;
   font-size: 22px;
   font-weight: 500;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   text-decoration: none;
   transition: all 0.2s ease;
   letter-spacing: 0.3px;
@@ -145,7 +145,7 @@
 .section-desc {
   font-size: 28px;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   margin: 0;
 }
 
@@ -170,7 +170,7 @@
   text-align: center;
   font-size: 28px;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   margin: 0 0 48px;
   line-height: 1.7;
   max-width: 800px;
@@ -215,9 +215,9 @@
 }
 
 .competency-desc {
-  font-size: 18px;
+  font-size: 22px;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   line-height: 1.7;
   margin: 0;
 }
@@ -266,7 +266,7 @@
    We must set it explicitly. */
 .mde-tabs .mdc-tab__text-label {
   color: var(--mat-sys-onSurfaceVariant) !important;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   font-size: 18px !important;
   font-weight: 500 !important;
   letter-spacing: 0.2px !important;
@@ -340,7 +340,7 @@
   padding: 4px 12px;
   border-radius: 12px;
   white-space: nowrap;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
 }
 
 .status-done {
@@ -363,7 +363,7 @@
   line-height: 1.6;
   color: var(--mat-sys-onSurfaceVariant);
   margin: 0 0 16px;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
 }
 
 .project-meta {
@@ -379,7 +379,7 @@
   gap: 6px;
   font-size: 13px;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
 }
 
 .project-meta-icon {
@@ -404,14 +404,14 @@
   padding: 4px 12px;
   border-radius: 8px;
   letter-spacing: 0.3px;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
 }
 
 .tech-badge-outline {
   background: transparent;
   color: var(--mat-sys-onSurfaceVariant);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
 }
 
 /* ==============================
@@ -467,7 +467,7 @@
 
 .success-story-card-desc {
   font-family: 'Google Sans', sans-serif;
-  font-size: 18px;
+  font-size: 20px;
   line-height: 1.6;
   color: var(--mat-sys-onSurfaceVariant);
   margin: 0 0 16px;
@@ -527,10 +527,12 @@
 
 .quality-card-desc {
   font-family: 'Google Sans', sans-serif;
-  font-size: 18px;
+  font-size: 22px;
   line-height: 1.6;
   color: var(--mat-sys-onSurfaceVariant);
   margin: 0 0 16px;
+  margin-left: 28px;
+  margin-right: 28px;
 }
 
 /* ==============================
@@ -600,15 +602,15 @@
   padding: 3px 10px;
   border-radius: 10px;
   white-space: nowrap;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
 }
 
 .repo-desc {
-  font-size: 18px;
+  font-size: 22px;
   line-height: 1.6;
   color: var(--mat-sys-onSurfaceVariant);
   margin: 0;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif;
 }
 
 .repo-actions {
@@ -624,7 +626,7 @@
   font-size: 14px;
   font-weight: 500;
   color: #ff8c3e;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif;
   text-decoration: none;
   transition: color 0.15s ease;
 }
@@ -667,7 +669,7 @@
 .contact-desc {
   font-size: 28px;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   margin: 0 0 48px;
   line-height: 1.6;
 }
@@ -693,7 +695,7 @@
   border-radius: 12px;
   font-size: 16px;
   color: var(--mat-sys-onSurface);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
   box-sizing: border-box;
@@ -723,7 +725,7 @@
   color: #000000;
   font-size: 16px;
   font-weight: 600;
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   border: none;
   border-radius: 50px;
   cursor: pointer;
@@ -778,7 +780,7 @@
 .footer-tagline {
   font-size: 14px;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   margin: 0;
 }
 
@@ -792,7 +794,7 @@
 .footer-link {
   font-size: 14px;
   color: var(--mat-sys-onSurfaceVariant);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   text-decoration: none;
   transition: color 0.15s ease;
 }
@@ -804,7 +806,7 @@
 .footer-copy {
   font-size: 13px;
   color: var(--mat-sys-onSurfaceMedium);
-  font-family: Roboto, sans-serif !important;
+  font-family: 'Google Sans', sans-serif !important;
   opacity: 0.6;
   margin: 0;
 }
@@ -846,58 +848,169 @@
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 900px) {
+  .competencies-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .success-story-grid-two-cards,
+  .success-story-grid-three-cards,
+  .quality-grid,
+  .opensource-grid {
+    grid-template-columns: 1fr;
+  }
+
   .hero-content {
-    padding: 24px;
+    padding: 28px;
   }
 
   .hero-title {
-    font-size: 28px;
+    font-size: 52px;
   }
 
   .hero-subtitle {
-    font-size: 15px;
+    font-size: 20px;
   }
 
-  .hero-actions {
-    flex-direction: column;
+  .section-title {
+    font-size: 34px;
+  }
+
+  .section-desc {
+    font-size: 21px;
+  }
+
+  .competencies-intro {
+    font-size: 19px;
+  }
+
+  .repo-name {
+    font-size: 26px;
+  }
+
+  .repo-desc {
+    font-size: 19px;
+  }
+
+  .repo-status {
+    font-size: 10px;
+  }
+
+  .tech-badge {
+    font-size: 12px;
+  }
+
+  .project-title {
+    font-size: 26px;
+  }
+
+  .project-desc {
+    font-size: 17px;
+  }
+
+  .success-story-card-title {
+    font-size: 26px;
+  }
+
+  .success-story-card-desc {
+    font-size: 17px;
+  }
+
+  .quality-card-title {
+    font-size: 26px;
+  }
+
+  .quality-card-desc {
+    font-size: 17px;
+  }
+
+  .hero-image-card {
+    min-height: 240px;
+    max-height: 300px;
+  }
+}
+@media (max-width: 600px) {
+  .hero-content {
+    padding: 20px;
+  }
+
+  .hero-title {
+    font-size: 36px;
+  }
+
+  .hero-subtitle {
+    font-size: 18px;
   }
 
   .hero-btn {
-    width: 100%;
-    justify-content: center;
+    padding: 14px 28px;
+    font-size: 18px;
   }
 
   .section-title {
     font-size: 28px;
   }
 
-  .project-grid,
-  .opensource-grid,
-  .quality-grid {
-    grid-template-columns: 1fr;
+  .section-desc {
+    font-size: 20px;
   }
 
-  .footer-links {
-    gap: 20px;
+  .competencies-intro {
+    font-size: 17px;
   }
 
-  .competencies-section {
-    padding: 40px 16px;
+  .competency-icon {
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
   }
 
-  .competency-card {
-    padding: 32px 20px;
+  .competency-title {
+    font-size: 22px;
   }
 
-  .competency-icon {
-    font-size: 40px;
-    width: 40px;
-    height: 40px;
+  .competency-desc {
+    font-size: 17px;
   }
 
-  .contact-row {
-    grid-template-columns: 1fr;
+  .repo-name {
+    font-size: 22px;
+  }
+
+  .repo-desc {
+    font-size: 17px;
+  }
+
+  .repo-status {
+    font-size: 10px;
+  }
+
+  .tech-badge {
+    font-size: 11px;
+  }
+
+  .project-title {
+    font-size: 22px;
+  }
+
+  .project-desc {
+    font-size: 17px;
+  }
+
+  .success-story-card-title {
+    font-size: 22px;
+  }
+
+  .success-story-card-desc {
+    font-size: 17px;
+  }
+
+  .quality-card-title {
+    font-size: 22px;
+  }
+
+  .quality-card-desc {
+    font-size: 17px;
   }
 
   .contact-title {
@@ -905,6 +1018,11 @@
   }
 
   .contact-desc {
-    font-size: 18px;
+    font-size: 17px;
+  }
+
+  .hero-image-card {
+    min-height: 180px;
+    max-height: 240px;
   }
 }
diff --git a/src/app/app.html b/src/app/app.html
index 1e4bdf9..6394c86 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -4,7 +4,7 @@
     <!-- Left card: text -->
     <div class="hero-text-card mdc-elevation-2">
       <div class="hero-content">
-        <h1 class="hero-title">{{ title() }}</h1>
+        <p class="hero-title">{{ title() }}</p>
         <p class="hero-subtitle">
           We build data-driven software.
         </p>
@@ -33,24 +33,19 @@ <h1 class="hero-title">{{ title() }}</h1>
         <mat-icon class="competency-icon">code</mat-icon>
         <h3 class="competency-title">Software Engineering</h3>
         <p class="competency-desc">We adhere to industry best practices, including
-          scientific principles and CI/CD workflows. Our strong theoretical foundation as well as our reliance on
-          empirical research on code quality enables us to consistently deliver exceptional code.</p>
+          scientific principles and CI/CD workflows.</p>
       </div>
 
       <div class="competency-card mdc-elevation-1">
         <mat-icon class="competency-icon">psychology</mat-icon>
         <h3 class="competency-title">Machine Learning</h3>
-        <p class="competency-desc">From predictive models to intelligent automation, we design and deploy ML systems
-          that scale. Our expertise spans classical machine learning, deep learning, natural language processing (NLP),
-      and modern large language models (LLMs).</p>
+        <p class="competency-desc">From predictive models to intelligent automation using LLMs, we design and deploy ML systems that scale.</p>
       </div>
 
       <div class="competency-card mdc-elevation-1">
         <mat-icon class="competency-icon">cloud</mat-icon>
         <h3 class="competency-title">Cloud Computing</h3>
-        <p class="competency-desc">We architect resilient, cloud-native infrastructure on AWS, GCP, and Azure. From
-          container orchestration to serverless pipelines, we ensure that systems are performant, secure, and
-          cost-efficient at any scale.</p>
+        <p class="competency-desc">We build resilient, cloud-native infrastructure and data pipelines on AWS, GCP, Azure, and Kubernetes.</p>
       </div>
     </div>
   </div>
@@ -59,7 +54,7 @@ <h3 class="competency-title">Cloud Computing</h3>
 <!-- Code Quality Section -->
 <section class="quality-section">
   <div class="section-header">
-    <p class="section-desc">Code quality is a major challenge in many IT projects - we can help.</p>
+    <p class="section-desc">Code quality is a major challenge in many IT projects – we can help.</p>
   </div>
   <div class="quality-grid">
     <!-- Left card: image -->
@@ -76,7 +71,7 @@ <h3 class="competency-title">Cloud Computing</h3>
           Is adding new features challenging? <br>
           Is your codebase difficult for others to understand? <br>
           Does onboarding new team members take long? <br>
-          Does building your software consist of many manual steps?
+          Does building your software involve many manual steps?
           <br><br> If
           so, you may be facing issues with code quality.
         </p>
@@ -87,12 +82,8 @@ <h3 class="competency-title">Cloud Computing</h3>
     <mat-card class="quality-card mdc-elevation-1">
       <mat-card-content class="quality-card-content">
         <p class="quality-card-desc">
-          Modern software engineering is based on scientific principles.<br><br>
-          Software engineering needs to be grounded in theory.<br>
-          Category Theory enforces clear separation of concerns.<br>
-          Type Theory identifies logical flaws before the code is even run.<br><br>
-          Software engineering needs empirical verification.<br>
-          Large-scale analysis can verify which software patterns reduce bugs.<br>
+          Software engineering needs to be grounded in theoretical frameworks, like Category Theory and Type Theory.<br><br>
+	  Software patterns need to be validated through large-scale empirical analysis.<br><br>
           Automated testing enables continuous delivery of reliable code.
         </p>
       </mat-card-content>
@@ -186,6 +177,17 @@ <h3 class="success-story-card-title">{{ p.title }}</h3>
   </mat-tab-group>
 </section>
 
+<!-- Contact Section -->
+<section class="contact-section">
+  <div class="section-header">
+    <p class="section-desc">If you are interested or want to learn more, please contact us:</p>
+  </div>
+  <div class="contact-content">
+    <a href="mailto:urbanke.patrick+munich-data-engineering@gmail.com" class="hero-btn hero-btn-primary">Send us an email</a>
+  </div>
+</section>
+
+
 <!-- Footer -->
 <footer class="footer">
   <div class="footer-content">
diff --git a/src/app/app.ts b/src/app/app.ts
index b48bc73..6932da5 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -28,7 +28,7 @@ const energyProjects: SuccessStory[] = [
 		description: [
 			'Project was commissioned in the wake of the war in Ukraine',
 			'Developed a machine learning system for predicting all critical components of the gas market',
-			'System was developed from scratch: ETL, Data collection, modelling, productive implementation, cloud orchestration, frontend',
+			'System was developed from scratch: ETL, data collection, production implementation, cloud orchestration, frontend',
 			'System reliably delivers predictions on a daily basis'
 		],
 		image: 'gas_pipelines.png',
@@ -230,7 +230,7 @@ const repos: Repo[] = [
 	{
 		name: 'reflect-cpp',
 		description:
-		    'reflect-cpp is a C++-20/C++-26 library for fast serialization, deserialization and validation using reflection, similar to pydantic in Python, serde in Rust, encoding in Go or aeson in Haskell.',
+		    'reflect-cpp is a C++-20/C++-26 library for fast serialisation, deserialisation and validation using reflection, similar to pydantic in Python, serde in Rust, encoding in Go or aeson in Haskell.',
 		tech: ['C++', 'JSON', 'msgpack', 'parquet', 'XML', 'Avro'],
 		link: 'https://github.com/getml/reflect-cpp',
 		docs: 'https://rfl.getml.com/',