diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7674a77..220ce01 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -19,7 +19,7 @@
   </div>
 
   <div class="progressbar-container"><div #progress_bar class="progressbar"></div></div>
-  <sidebar #sidebar [sections]="dataService.languagePack.sections" [languagesMenuItems]="dataService.languagesMenuItems"></sidebar>
+  <sidebar #sidebar></sidebar>
 
   <div id="home-start" style="position:relative; top: -30vh; display: table; height: 130vh; width: 100vw;">
     <div style="display: table-cell; vertical-align: middle; text-align: center;">
@@ -68,7 +68,7 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
 
       <heading-card id="about-start" [heading]="dataService.languagePack.about" type="3" styleClass="alarm-clock-animated" style="margin-top: 5vh"></heading-card>
 
-      <about [content]="dataService.about" [langPack]="dataService.languagePack"></about>
+      <about></about>
 
       <div class="spacer" style="width: 100vw; height: 50vh"></div>
     </div>
diff --git a/src/app/components/about-card/about-card.component.html b/src/app/components/about-card/about-card.component.html
index b8b8337..86d0e52 100644
--- a/src/app/components/about-card/about-card.component.html
+++ b/src/app/components/about-card/about-card.component.html
@@ -18,8 +18,8 @@
 
   <div class="show-more-button" (click)="toggleExtension()">
     <div class="show-more">
-      <span *ngIf="!extended; else showLess">{{ langPack.showMore }}</span>
-      <ng-template #showLess>{{ langPack.showLess }}</ng-template>
+      <span *ngIf="!extended; else showLess">{{ dataService.languagePack.showMore }}</span>
+      <ng-template #showLess>{{ dataService.languagePack.showLess }}</ng-template>
     </div>
     <span class="icon pi pi-arrow-down" [class.extended]="extended"></span>
   </div>
diff --git a/src/app/components/about-card/about-card.component.ts b/src/app/components/about-card/about-card.component.ts
index 4a6e33a..dac5a52 100644
--- a/src/app/components/about-card/about-card.component.ts
+++ b/src/app/components/about-card/about-card.component.ts
@@ -1,7 +1,8 @@
 import {Component, ElementRef, HostBinding, Input, ViewChild} from '@angular/core';
 import {NgIf} from "@angular/common";
-import {AboutCard, LanguagePack} from "../../data/model";
+import {AboutCard} from "../../data/model";
 import {ScrollTrigger} from "gsap/ScrollTrigger";
+import {DataService} from "../../data/data.service";
 
 @Component({
   selector: 'about-card',
@@ -15,7 +16,6 @@ import {ScrollTrigger} from "gsap/ScrollTrigger";
 export class AboutCardComponent {
 
   @Input({required: true}) content: AboutCard;
-  @Input({required: true}) langPack: LanguagePack;
 
   @ViewChild("text", {read: ElementRef}) textElement: ElementRef;
 
@@ -23,6 +23,8 @@ export class AboutCardComponent {
 
   extended: boolean = false;
 
+  constructor(readonly dataService: DataService) {}
+
   toggleExtension() {
     this.extended = !this.extended;
     if (this.extended) {
diff --git a/src/app/sections/about/about.component.html b/src/app/sections/about/about.component.html
index a26c5e8..8d9aac6 100644
--- a/src/app/sections/about/about.component.html
+++ b/src/app/sections/about/about.component.html
@@ -1,5 +1,5 @@
-<about-card *ngFor="let about of content" [content]="about" [langPack]="langPack" class="alarm-clock-animated"></about-card>
-<about-card [langPack]="langPack" class="alarm-clock-animated" [content]="{title: 'Über diese Webseite', heading: appName, text: ' - Diese Webseite wurde von Anfang an als Template entworfen, mit dem Ziel, dass jeder selbst schnell und umkompliziert seine eigene Webseite erstellen kann. Innerhalb weniger Minuten sollte sich jeder damit eine moderne Lebenslauf-Webseite erstellen können. Der Code ist Open-Source und ich freue mich sehr über die Weiteverwendung oder Contributions! Durch die frühe Planung dessen im Design muss für das Verwenden des Templates kein Code angepasst werden. Deshalb ist keine Programmiererfahrung notwendig; alle Daten für die Webseite sind einfach in JSON Dateien konfigurierbar. In Zukunft ist ein simples Web-Tool geplant, mit dem das Template ausgefüllt werden können soll, um den Prozess noch einfacher zu gestalten. Nach Anpassung des Templates mit den eigenen Daten kann es einfach über GitHub Pages veröffentlicht werden. Die Beschriebung für all diese Schritte ist im GitHub Projekt enthalten.'}">
+<about-card *ngFor="let about of dataService.about" [content]="about" class="alarm-clock-animated"></about-card>
+<about-card class="alarm-clock-animated" [content]="{title: 'Über diese Webseite', heading: appName, text: ' - Diese Webseite wurde von Anfang an als Template entworfen, mit dem Ziel, dass jeder selbst schnell und umkompliziert seine eigene Webseite erstellen kann. Innerhalb weniger Minuten sollte sich jeder damit eine moderne Lebenslauf-Webseite erstellen können. Der Code ist Open-Source und ich freue mich sehr über die Weiteverwendung oder Contributions! Durch die frühe Planung dessen im Design muss für das Verwenden des Templates kein Code angepasst werden. Deshalb ist keine Programmiererfahrung notwendig; alle Daten für die Webseite sind einfach in JSON Dateien konfigurierbar. In Zukunft ist ein simples Web-Tool geplant, mit dem das Template ausgefüllt werden können soll, um den Prozess noch einfacher zu gestalten. Nach Anpassung des Templates mit den eigenen Daten kann es einfach über GitHub Pages veröffentlicht werden. Die Beschriebung für all diese Schritte ist im GitHub Projekt enthalten.'}">
   <div>
     <p></p>
     Folgende Technologien wurden für die Erstellung dieses Projekts verwendet:
diff --git a/src/app/sections/about/about.component.ts b/src/app/sections/about/about.component.ts
index 6b7a14b..93021b2 100644
--- a/src/app/sections/about/about.component.ts
+++ b/src/app/sections/about/about.component.ts
@@ -1,11 +1,11 @@
-import {Component, Input} from '@angular/core';
+import {Component} from '@angular/core';
 import {AboutCardComponent} from "../../components/about-card/about-card.component";
-import {AboutCard, LanguagePack} from "../../data/model";
 import {appName, appVersion, githubURL} from "../../js/global.vars";
 import {BadgeModule} from "primeng/badge";
 import {BadgeComponent} from "../../components/badge/badge.component";
 import {NgForOf, NgIf} from "@angular/common";
 import {CustomButtonComponent} from "../../components/custom-button/custom-button.component";
+import {DataService} from "../../data/data.service";
 
 @Component({
   selector: 'about',
@@ -23,11 +23,10 @@ import {CustomButtonComponent} from "../../components/custom-button/custom-butto
 })
 export class AboutComponent {
 
-  @Input({required: true}) content: AboutCard[];
-  @Input({required: true}) langPack: LanguagePack;
-
   appVersion: string = appVersion;
   appName: string = appName;
   githubURL: string = githubURL;
 
+  constructor(readonly dataService: DataService) {}
+
 }
diff --git a/src/app/sections/sidebar/sidebar.component.html b/src/app/sections/sidebar/sidebar.component.html
index 4f4fca8..b6fc18e 100644
--- a/src/app/sections/sidebar/sidebar.component.html
+++ b/src/app/sections/sidebar/sidebar.component.html
@@ -1,14 +1,14 @@
 <div class="sidebar-container" style="height: 100vh">
   <div id="navbar">
     <!-- (hover)="hovered = true" [extended]="hovered" -->
-    <navbar-dot #navbar_dot *ngFor="let section of sections; index as i;" [section]="section" [active]="i===sectionActive">
+    <navbar-dot #navbar_dot *ngFor="let section of dataService.languagePack.sections; index as i;" [section]="section" [active]="i===sectionActive">
     </navbar-dot>
   </div>
 </div>
 
 <div class="sidebar-container">
   <div id="lang-selector">
-    <p-speedDial [model]="languagesMenuItems" direction="down" showIcon="pi pi-language" class="language-speed-dial"
+    <p-speedDial [model]="dataService.languagesMenuItems" direction="down" showIcon="pi pi-language" class="language-speed-dial"
                  buttonClassName="language-button">
     </p-speedDial>
   </div>
diff --git a/src/app/sections/sidebar/sidebar.component.ts b/src/app/sections/sidebar/sidebar.component.ts
index 6bcfcf7..92cb8cd 100644
--- a/src/app/sections/sidebar/sidebar.component.ts
+++ b/src/app/sections/sidebar/sidebar.component.ts
@@ -1,18 +1,14 @@
 import {
   ChangeDetectorRef,
   Component,
-  HostListener,
-  Input,
-  Output,
   QueryList,
   ViewChildren
 } from '@angular/core';
 import {NavbarDotComponent} from "../../components/navbar-dot/navbar-dot.component";
 import {NgForOf} from "@angular/common";
 import {SpeedDialModule} from "primeng/speeddial";
-import {Section} from "../../data/model";
-import {MenuItem} from "primeng/api";
 import {ScrollTrigger} from "gsap/ScrollTrigger";
+import {DataService} from "../../data/data.service";
 
 @Component({
   selector: 'sidebar',
@@ -27,20 +23,13 @@ import {ScrollTrigger} from "gsap/ScrollTrigger";
 })
 export class SidebarComponent {
 
-  @Input({required: true}) sections: Section[];
-  @Input({required: true}) languagesMenuItems: MenuItem[];
-
   // @Output() hovered: boolean = false;
 
   @ViewChildren("navbar_dot", {read: NavbarDotComponent}) dots: QueryList<NavbarDotComponent>;
 
   sectionActive = 0;
 
-  changeDetectorRef: ChangeDetectorRef;
-
-  constructor(changeDetectorRef: ChangeDetectorRef) {
-    this.changeDetectorRef = changeDetectorRef;
-  }
+  constructor(readonly changeDetectorRef: ChangeDetectorRef, readonly dataService: DataService) {}
 
   ngAfterViewInit(): void {
     this.addSelectedAnimation();
@@ -52,8 +41,8 @@ export class SidebarComponent {
   // }
 
   addSelectedAnimation() {
-    for (let i = 0; i < this.sections.length; i++) {
-      const section = this.sections[i];
+    for (let i = 0; i < this.dataService.languagePack.sections.length; i++) {
+      const section = this.dataService.languagePack.sections[i];
       ScrollTrigger.create({
         start: "top 50%",
         trigger: `#${section.id}`,