diff --git a/README.md b/README.md
index 415459d..8229f48 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,5 @@
 # LucasWeb
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.6.
 
 ## Development server
 
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 6c6ef60..9068d19 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -2,7 +2,8 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideHttpClient(),provideRouter(routes)]
 };
diff --git a/src/app/app.guard.ts b/src/app/app.guard.ts
index a37d614..e68dc43 100644
--- a/src/app/app.guard.ts
+++ b/src/app/app.guard.ts
@@ -13,7 +13,7 @@ export class AuthGuard {
     if (this.configService.isLoggedIn()) {
       return true;
     } else {
-      this.router.navigate(['/LogIn']);
+      this.router.navigate(['/login']);
       return false;
     }
   }
diff --git a/src/app/components/navibar/navibar.component.html b/src/app/components/navibar/navibar.component.html
index cc6778d..ab6e04b 100644
--- a/src/app/components/navibar/navibar.component.html
+++ b/src/app/components/navibar/navibar.component.html
@@ -1,5 +1,5 @@
 <div class="flex items-center justify-center p-16">
-  <nav class="grid place-items-center absolute bottom-0 w-full p-4 bg-sky-500 box-border">
+  <nav class="grid place-items-center fixed bottom-0 w-full p-4 bg-sky-500 box-border">
     <div class="flex place-self-center gap-5">
       <button routerLink="mainportal">Portfolio</button>
       <button *ngIf="configService.isLoggedIn()" routerLink="mgmt"> Project Managment </button>
diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html
index 639dcb2..80113ed 100644
--- a/src/app/components/project-card/project-card.component.html
+++ b/src/app/components/project-card/project-card.component.html
@@ -1,13 +1,9 @@
-<div class="grid border-2 border-black rounded-lg w-44 bg-sky-100 p-2 m-1">
-  <div class="flex">
-    <div>
-      First Projects XYZ
-    <div>
-    <div>
-      Projects Description
+<div *ngFor="let project of projects" class="grid border-2 border-black rounded-lg w-1/4 bg-sky-100 p-2 m-1">
+    <div class="font-bold mb-8"> {{project.name}} </div>
+    <div class="text-sm">
+    {{project.description}}
     </div>
-    <div class="flex gap-2">
-      <app-service-card/>
+    <div class="flex wrap gap-2">
+      <app-service-card [services]=filterServiceToProject(project.project_id) />
     </div>
-  </div>
 </div>
diff --git a/src/app/components/project-card/project-card.component.ts b/src/app/components/project-card/project-card.component.ts
index 70b2bc4..d2a1a27 100644
--- a/src/app/components/project-card/project-card.component.ts
+++ b/src/app/components/project-card/project-card.component.ts
@@ -1,13 +1,58 @@
 import { Component } from '@angular/core';
-import { ServiceCardComponent } from '../service-card/service-card.component';
+import { ServiceCardComponent} from '../service-card/service-card.component';
+import { HttpClient } from '@angular/common/http';
+import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-project-card',
   standalone: true,
-  imports: [ ServiceCardComponent],
+  imports: [ServiceCardComponent, NgFor],
   templateUrl: './project-card.component.html',
   styleUrl: './project-card.component.scss'
 })
 export class ProjectCardComponent {
 
+  protected readonly projectsPath: string = "assets/projects.json"
+
+  public projects: Project[] = []
+  public services: Service[] = []
+
+  constructor(private httpClient: HttpClient) {
+
+
+  this.httpClient.get<RootResponse>(this.projectsPath).subscribe((data) => {
+    console.log(data)
+      this.projects = data.projects
+      this.services = data.service
+      console.log("Data received")
+    })
+  }
+
+  filterServiceToProject(project_id: number): Service[] {
+    console.log(this.services.filter(service => service.project === project_id))
+    return this.services.filter(service => service.project === project_id)
+  }
+
+}
+
+export interface RootResponse{
+  _comment: string,
+  projects: Project[],
+  service: Service[]
+
+}
+
+export interface Project {
+  project_id: number,
+  name: string,
+  description: string,
+  logo: BinaryData | undefined
+}
+
+export interface Service {
+  service_id: number,
+  name: string,
+  lang: string,
+  focus: string,
+  project: number
 }
diff --git a/src/app/components/service-card/service-card.component.html b/src/app/components/service-card/service-card.component.html
index 72790db..15432e7 100644
--- a/src/app/components/service-card/service-card.component.html
+++ b/src/app/components/service-card/service-card.component.html
@@ -1,3 +1,5 @@
-<div class="grid border-2 border-black rounded-s p-2 m-2">
-  Service X
-<div>
+<div *ngFor="let service of services" class="grid border-2 border-black rounded-s p-2 m-2 w-full">
+  <div class="grid place-items-center font-bold"> {{service.name}} </div>
+  <div> {{service.lang}} </div>
+  <div> {{service.focus}} </div>
+</div>
diff --git a/src/app/components/service-card/service-card.component.ts b/src/app/components/service-card/service-card.component.ts
index fe9dfaa..2d0f298 100644
--- a/src/app/components/service-card/service-card.component.ts
+++ b/src/app/components/service-card/service-card.component.ts
@@ -1,12 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Service } from '../project-card/project-card.component';
+import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-service-card',
   standalone: true,
-  imports: [],
+  imports: [NgFor],
   templateUrl: './service-card.component.html',
   styleUrl: './service-card.component.scss'
 })
 export class ServiceCardComponent {
 
+  constructor() {}
+  @Input() services: Service[] = []
 }
diff --git a/src/app/main-portal/main-portal.component.html b/src/app/main-portal/main-portal.component.html
index ab890f3..b2db581 100644
--- a/src/app/main-portal/main-portal.component.html
+++ b/src/app/main-portal/main-portal.component.html
@@ -9,8 +9,7 @@
     </div>
   <div class="grid pt-4">
     <div class="flex">
-      <app-project-card/>
-      <app-project-card/>
+      <app-project-card class="flex"/>
     </div>
   </div>
 </app-container-block>
diff --git a/src/app/shared/config.service.ts b/src/app/shared/config.service.ts
index 0d25567..cf38a85 100644
--- a/src/app/shared/config.service.ts
+++ b/src/app/shared/config.service.ts
@@ -11,6 +11,7 @@ export class ConfigService {
               private cookieService: CookieService,
               private storageService: LocalStorageService) {
   }
+
   // TODO: Please dont save Account in localStorage AND Cookies, wat de hell
   login(username: string, password: string){
     const userData : Profile = {
diff --git a/src/assets/projects.json b/src/assets/projects.json
new file mode 100644
index 0000000..d4cd6c0
--- /dev/null
+++ b/src/assets/projects.json
@@ -0,0 +1,39 @@
+{
+  "_comment": "This json file should do it at first, file will be deleted after api with database is done ;0",
+  "projects": [
+    {
+      "project_id": 1,
+      "name": "LucasWebServer",
+      "description": "The LucasWebServer is the first Project to manage my Projects (including this one) for gaining Experince on Frontend, Backend and deployment on Webserver all on my own",
+      "logo": "null"
+    },
+    {
+      "project_id": 2,
+      "name": "DiscordBot",
+      "description": "The Discordbot is construkted for simple tasks eg. messaging a friend, send gifs or set Alerts for important Events"
+    }
+  ],
+  "service":[
+    {
+      "service_id": 1,
+      "name": "LucasWebApi",
+      "lang": "Golang",
+      "focus": "Backend, Database, Postgres",
+      "project": 1
+    },
+    {
+      "service_id": 2,
+      "name": "LucasWeb",
+      "lang": "HTML, SCSS, Typescript",
+      "focus": "Frontend, Angular",
+      "project": 1
+    },
+    {
+      "service_id": 3,
+      "name": "Snowflake",
+      "lang": "Python",
+      "focus": "DiscordAPI, Management",
+      "project": 2
+    }
+  ]
+}