diff --git a/src/app/components/landing/landing.component.css b/src/app/components/landing/landing.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html
new file mode 100644
index 0000000..81e6a8b
--- /dev/null
+++ b/src/app/components/landing/landing.component.html
@@ -0,0 +1,79 @@
+<div class="min-h-screen bg-gray-50 text-gray-800 font-sans">
+  <!-- Hero Section -->
+  <section
+    class="bg-white py-20 px-6 text-center md:text-left md:px-20 flex flex-col md:flex-row items-center justify-between">
+    <div class="max-w-xl">
+      <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-4">
+        Host Your Portfolio. <br class="hidden md:block"> Impress the World.
+      </h1>
+      <p class="text-lg text-gray-600 mb-6">
+        Showcase your skills with a lightning-fast portfolio for just 1€/month.
+      </p>
+      <div class="space-x-4">
+        <button (click)=signUp() class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl shadow">
+          Start Free Trial
+        </button>
+        <button
+          class="border border-gray-300 hover:border-blue-600 text-blue-600 hover:text-blue-700 font-semibold py-2 px-4 rounded-xl">
+          See Examples
+        </button>
+      </div>
+    </div>
+    <div class="mt-12 md:mt-0 md:ml-12 w-full md:w-1/2">
+      <img alt="Portfolio Illustration" class="w-full h-auto" src="assets/hero-illustration.svg">
+    </div>
+  </section>
+
+  <!-- Features Section -->
+  <section class="py-20 px-6 md:px-20 bg-gray-100">
+    <div class="text-center mb-12">
+      <h2 class="text-3xl md:text-4xl font-bold">Why Choose PortfolioHost?</h2>
+    </div>
+    <div class="grid gap-10 md:grid-cols-4 text-center">
+      <div>
+        <div class="text-4xl mb-4">⚡</div>
+        <h3 class="font-semibold text-xl mb-2">Blazing Fast Hosting</h3>
+        <p class="text-gray-600">NVMe servers & global CDN ensure speed and uptime.</p>
+      </div>
+      <div>
+        <div class="text-4xl mb-4">🌐</div>
+        <h3 class="font-semibold text-xl mb-2">Custom Domains</h3>
+        <p class="text-gray-600">Use your own domain or get a .portfoliohost.dev address.</p>
+      </div>
+      <div>
+        <div class="text-4xl mb-4">🚀</div>
+        <h3 class="font-semibold text-xl mb-2">1-Click Deploy</h3>
+        <p class="text-gray-600">Integrate with GitHub or push manually in seconds.</p>
+      </div>
+      <div>
+        <div class="text-4xl mb-4">📱</div>
+        <h3 class="font-semibold text-xl mb-2">Fully Responsive</h3>
+        <p class="text-gray-600">Mobile-first designs that look great everywhere.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Final CTA -->
+  <section class="bg-blue-600 py-16 px-6 md:px-20 text-white text-center">
+    <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to impress recruiters and clients?</h2>
+    <p class="mb-6 text-lg">Create your portfolio in minutes — no coding required.</p>
+    <button class="bg-white text-blue-600 font-bold py-2 px-6 rounded-xl shadow hover:bg-gray-100">
+      Start My Portfolio Now
+    </button>
+  </section>
+
+  <!-- Footer -->
+  <footer class="bg-gray-900 text-gray-300 py-10 px-6 md:px-20 text-center md:text-left">
+    <div class="flex flex-col md:flex-row md:justify-between md:items-center">
+      <div class="mb-6 md:mb-0">
+        <p>© 2025 PortfolioHost™ — All rights reserved</p>
+      </div>
+      <div class="space-x-6">
+        <a class="hover:text-white" href="#">Docs</a>
+        <a class="hover:text-white" href="#">Blog</a>
+        <a class="hover:text-white" href="#">Legal</a>
+        <a class="hover:text-white" href="#">GitHub</a>
+      </div>
+    </div>
+  </footer>
+</div>
diff --git a/src/app/components/landing/landing.component.spec.ts b/src/app/components/landing/landing.component.spec.ts
new file mode 100644
index 0000000..e9b2790
--- /dev/null
+++ b/src/app/components/landing/landing.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingComponent } from './landing.component';
+
+describe('Landing', () => {
+  let component: LandingComponent;
+  let fixture: ComponentFixture<LandingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LandingComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LandingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts
new file mode 100644
index 0000000..7fa642c
--- /dev/null
+++ b/src/app/components/landing/landing.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import {ApiService} from '../../services/api';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './landing.component.html',
+})
+export class LandingComponent {
+
+    constructor(
+      private apiService: ApiService,
+      private router: Router,
+    ) {
+    }
+
+  signUp(): void{
+      this.router.navigate(['/register']);
+  }
+
+}