diff --git a/frontend/package.json b/frontend/package.json
index c707b30..bbcd48e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -56,6 +56,9 @@
     "@angular/platform-server": "^22.0.0",
     "@angular/router": "^22.0.0",
     "@angular/ssr": "^22.0.0",
+    "@tsparticles/basic": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3",
+    "@tsparticles/shape-image": "^4.1.3",
     "express": "^5.2.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index f818f3a..4aecbe1 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -62,6 +62,15 @@ importers:
       '@angular/ssr':
         specifier: ^22.0.0
         version: 22.0.0(c06b731e2c4afb8f139a47227a9044db)
+      '@tsparticles/basic':
+        specifier: ^4.1.3
+        version: 4.1.3
+      '@tsparticles/engine':
+        specifier: ^4.1.3
+        version: 4.1.3
+      '@tsparticles/shape-image':
+        specifier: ^4.1.3
+        version: 4.1.3(@tsparticles/engine@4.1.3)
       express:
         specifier: ^5.2.1
         version: 5.2.1
@@ -1648,6 +1657,67 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@tsparticles/basic@4.1.3':
+    resolution: {integrity: sha512-swcUPyiLGLx4L6KIgZVzVvw3d4EIL6HIx5Y1ykx5WD3vdw0kf7v6bLE3s1e/q0BXs2aoPhsHfv2CNMhxhW6Dfw==}
+
+  '@tsparticles/engine@4.1.3':
+    resolution: {integrity: sha512-AtecYuW/YHeLvPRwehbqsEEToRaeGPVet7uWC0Fbc0nXiaH0xp7ht2XBS7WmQsj7kbGB2WQ15e3Gj+ZlNKCczQ==}
+
+  '@tsparticles/plugin-blend@4.1.3':
+    resolution: {integrity: sha512-21nn5m+WQ9dL8xvSUXXp2yjsLl5Oiks+Npbh9uIU4uWNNOgdz+B1PY8swv4csPeI4SPbRMDVYNULqgCpTYkLWA==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-hex-color@4.1.3':
+    resolution: {integrity: sha512-k+0HpJ4aA45Sw/PNoA/dI878lHv92LACI6c2qlvcrzsdCJJjVJ8zSWnLw+8DgUYi8mhcjU8cq+8Rv6edZj1wqw==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-hsl-color@4.1.3':
+    resolution: {integrity: sha512-ErBOCI/yXT47arxaAZwfzBGbKKYA1hpLEWChAXDokiVmIJnE6lj6QlSi06iTeGB/7YT5mJBvqQr4rS5IqpIG/g==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-move@4.1.3':
+    resolution: {integrity: sha512-LubOW7P2ilxkOsBQVg9txd7Jet5gkQ/FHE+jNCx9e++pvIqNhWsOnFP13YTJMJFNYksc0BtOPA1Ewl8mCasoxA==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-rgb-color@4.1.3':
+    resolution: {integrity: sha512-H+MVpMJbzEYYf9Hyka8y5uU6eJSryxwDUTol6hDxdKRW8LL+Y1BjD85cIjwVzp0b5yrUfBPMCwR8Z9/oC3ZG8A==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/shape-circle@4.1.3':
+    resolution: {integrity: sha512-LiidH8LWCOYufhA3vWaoVE3pkp4Os3fl+dnuRs0z5Ye4jaSAZRsbE80wtuCzRrBMdUbvU83XMTSMCqT++Wg6xg==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/shape-image@4.1.3':
+    resolution: {integrity: sha512-ubnLk/2hp+2Ugkk1nV3osMUy+F2cVV6hUNPxwHad9XGHbgntAlWzLv7pXFJNvFpgjmr9Bs89ZhmoPYnb6cKscA==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-opacity@4.1.3':
+    resolution: {integrity: sha512-/Q+YxeNLhTf+itxjvfnoWl4ybm3k9QABkW6/tAbkFafwdAItOs32YE0mf4QlcEXtf7bBgf6+6SRr0YqtPhbT6g==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-out-modes@4.1.3':
+    resolution: {integrity: sha512-xzDn4fgW1NhUSUcGSaDtTQ7Ti8uArA9oCuFbqPSZUwo/VOw+AftqAKM85HzV4Wyh4QMH7guaDbP6qJmxaYZr4g==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-paint@4.1.3':
+    resolution: {integrity: sha512-mK8mWOAoN79w46IfZh8N7O/f8QxgrLbt/DjbBJY2ax0k7yfCv6Y9zTcbk1WS61NworizxoyPghg1aZP6UM/Rgw==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-size@4.1.3':
+    resolution: {integrity: sha512-rhG3ybxf3okV22gUi7c9Z1Fi1bQGBhourET2MGW73hONwYC1tMlW3SGlKIJr0G9vibFWgxDbwd1kgKiFp3Hycw==}
+    peerDependencies:
+      '@tsparticles/engine': 4.1.3
+
   '@tufjs/canonical-json@2.0.0':
     resolution: {integrity: sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -5700,6 +5770,66 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@tsparticles/basic@4.1.3':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+      '@tsparticles/plugin-blend': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/plugin-hex-color': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/plugin-hsl-color': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/plugin-move': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/plugin-rgb-color': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/shape-circle': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/updater-opacity': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/updater-out-modes': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/updater-paint': 4.1.3(@tsparticles/engine@4.1.3)
+      '@tsparticles/updater-size': 4.1.3(@tsparticles/engine@4.1.3)
+
+  '@tsparticles/engine@4.1.3': {}
+
+  '@tsparticles/plugin-blend@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-hex-color@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-hsl-color@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-move@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/plugin-rgb-color@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/shape-circle@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/shape-image@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-opacity@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-out-modes@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-paint@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
+  '@tsparticles/updater-size@4.1.3(@tsparticles/engine@4.1.3)':
+    dependencies:
+      '@tsparticles/engine': 4.1.3
+
   '@tufjs/canonical-json@2.0.0': {}
 
   '@tufjs/models@4.1.0':
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 19cc8cd..abe7251 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,4 +1,8 @@
+<div id="tsparticles"></div>
 <div class="app-container">
   <app-header></app-header>
+  <main class="main-content">
+    <router-outlet></router-outlet>
+  </main>
   <app-footer></app-footer>
 </div>
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 6031394..0e7199b 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -1,5 +1,24 @@
 @use 'variables' as *;
 
+#tsparticles {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.main-content {
+  grid-area: main;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-column: 1 / -1;
+  height: 100%;
+}
+
 app-header {
   grid-area: header;
   width: 100%;
@@ -24,5 +43,5 @@ app-footer {
     'main main main news'
     'footer footer footer footer';
   height: 100vh;
-  background-color: $color-background-dark;
+  background: transparent;
 }
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 5a9cdab..f5c7f0e 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,13 +1,52 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID, OnInit } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './shared/ui/header/header.component';
 import { FooterComponent } from './shared/ui/footer/footer.component';
 
+import { tsParticles } from '@tsparticles/engine';
+import { loadBasic } from '@tsparticles/basic';
+import { loadImageShape } from '@tsparticles/shape-image';
+
 @Component({
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-root',
-  imports: [HeaderComponent, FooterComponent],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  private platformId = inject(PLATFORM_ID);
+
+  async ngOnInit(): Promise<void> {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    await loadBasic(tsParticles);
+    await loadImageShape(tsParticles);
+
+    await tsParticles.load({
+      id: 'tsparticles',
+      options: {
+        background: { color: '#121212' },
+        particles: {
+          number: { value: 200 },
+          shape: {
+            type: 'image',
+            options: {
+              image: {
+                src: 'assets/logo/djredflame.png',
+                width: 50,
+                height: 50,
+              },
+            },
+          },
+          size: { value: { min: 5, max: 10 } },
+          opacity: { value: 0.8 },
+          move: { enable: true, speed: 1.5, direction: 'none', outModes: 'bounce' },
+          rotate: { value: { min: 0, max: 360 }, animation: { enable: true, speed: 5 } },
+        },
+      },
+    });
+  }
+}
diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html
index 3b21290..b0f6e4e 100644
--- a/frontend/src/app/pages/home/home.component.html
+++ b/frontend/src/app/pages/home/home.component.html
@@ -1,4 +1,4 @@
 <div class="home-container">
-  <h1>Welcome to DJ RedFlame's Website</h1>
+  <h1>Welcome to DJ Redflame's Website</h1>
   <p>This is under construction, be patient</p>
 </div>
diff --git a/frontend/src/app/pages/home/home.component.scss b/frontend/src/app/pages/home/home.component.scss
index dae3155..ff944b5 100644
--- a/frontend/src/app/pages/home/home.component.scss
+++ b/frontend/src/app/pages/home/home.component.scss
@@ -1,7 +1,14 @@
 @use 'variables' as *;
 
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .home-container {
   width: 100%;
+  background: rgba($color-background-dark, 0.8);
 
   h1 {
     text-align: center;
diff --git a/frontend/src/app/shared/ui/footer/footer.component.scss b/frontend/src/app/shared/ui/footer/footer.component.scss
index 258b80f..6032248 100644
--- a/frontend/src/app/shared/ui/footer/footer.component.scss
+++ b/frontend/src/app/shared/ui/footer/footer.component.scss
@@ -2,6 +2,7 @@
 
 .footer {
   width: 100%;
+  background: rgba($color-background-dark, 0.8);
 
   p {
     text-align: center;
diff --git a/frontend/src/app/shared/ui/header/header.component.html b/frontend/src/app/shared/ui/header/header.component.html
index ead0eae..6d22242 100644
--- a/frontend/src/app/shared/ui/header/header.component.html
+++ b/frontend/src/app/shared/ui/header/header.component.html
@@ -1 +1 @@
-<app-nav></app-nav> <router-outlet></router-outlet>
+<app-nav></app-nav>
diff --git a/frontend/src/app/shared/ui/header/header.component.ts b/frontend/src/app/shared/ui/header/header.component.ts
index cbf74d9..ab20939 100644
--- a/frontend/src/app/shared/ui/header/header.component.ts
+++ b/frontend/src/app/shared/ui/header/header.component.ts
@@ -1,10 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavComponent } from '../nav/nav.component';
-import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-header',
-  imports: [NavComponent, RouterOutlet],
+  imports: [NavComponent],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/assets/logo/djredflame.png b/frontend/src/assets/logo/djredflame.png
new file mode 100755
index 0000000..2f8aa8e
Binary files /dev/null and b/frontend/src/assets/logo/djredflame.png differ
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 8bd7349..68a808a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -6,7 +6,8 @@ body {
   padding: 0;
   width: 100%;
   min-height: 100%;
-  background-color: $color-background-dark;
+  background-color: transparent;
+  overflow-x: hidden;
 }
 
 app-root {