diff --git a/package-lock.json b/package-lock.json
index 0934be1..67a548f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,6 @@
         "@angular/router": "^19.2.0",
         "@primeng/themes": "^19.1.3",
         "prettier": "^3.5.3",
-        "primeicons": "^7.0.0",
-        "primeng": "^19.1.3",
         "rxjs": "~7.8.0",
         "tailwindcss-primeui": "^0.6.1",
         "tslib": "^2.3.0",
@@ -405,6 +403,7 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.11.tgz",
       "integrity": "sha512-NR33bZVho7EgTc1fmCnmkwc2/U266n311Wfvk7VVtz+0Q9WliNdDLBon654V8IWSKvlqKXyU3W+fp0VjH/FvSw==",
       "license": "MIT",
+      "optional": true,
       "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
@@ -503,22 +502,6 @@
         }
       }
     },
-    "node_modules/@angular/cdk": {
-      "version": "19.2.16",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.16.tgz",
-      "integrity": "sha512-67nbWqoiZIBc8nEaCn7GHd02bM5T9qAbJ5w+Zq4V19CL3oCtrCrS4CV3Lsoi5HETSmn4iZcYS/Dph8omCvNkew==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "parse5": "^7.1.2",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^19.0.0 || ^20.0.0",
-        "@angular/core": "^19.0.0 || ^20.0.0",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
     "node_modules/@angular/cli": {
       "version": "19.2.12",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.12.tgz",
@@ -14669,6 +14652,7 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -14709,6 +14693,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
       "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -15168,33 +15153,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/primeicons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
-      "license": "MIT"
-    },
-    "node_modules/primeng": {
-      "version": "19.1.3",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-19.1.3.tgz",
-      "integrity": "sha512-KsrvJFblKg28kA6d4npnnABjKClmJv0CgDT/kOxFq5onQNBy4547DJzRGMba4+CMLKjHWWkYWuC+XSkPMNFrZg==",
-      "license": "SEE LICENSE IN LICENSE.md",
-      "dependencies": {
-        "@primeuix/styled": "^0.3.2",
-        "@primeuix/utils": "^0.3.2",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/animations": "^19.0.0",
-        "@angular/cdk": "^19.0.0",
-        "@angular/common": "^19.0.0",
-        "@angular/core": "^19.0.0",
-        "@angular/forms": "^19.0.0",
-        "@angular/platform-browser": "^19.0.0",
-        "@angular/router": "^19.0.0",
-        "rxjs": "^6.0.0 || ^7.8.1"
-      }
-    },
     "node_modules/proc-log": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",
diff --git a/package.json b/package.json
index 9a843e8..79115b9 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,6 @@
     "@angular/router": "^19.2.0",
     "@primeng/themes": "^19.1.3",
     "prettier": "^3.5.3",
-    "primeicons": "^7.0.0",
-    "primeng": "^19.1.3",
     "rxjs": "~7.8.0",
     "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.3.0",
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 9318617..43074b8 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -2,23 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { providePrimeNG } from 'primeng/config';
-import Aura from '@primeng/themes/aura'; // Choisissez votre thème
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes),
-    provideAnimationsAsync(),
-    providePrimeNG({
-      theme: {
-        preset: Aura,
-        options: {
-          cssLayer: {
-            name: 'primeng',
-            order: 'tailwind-base, primeng, tailwind-utilities'
-          }
-        }
-      }
-    })
-  ]
+  providers: [provideRouter(routes), provideAnimationsAsync()],
 };
diff --git a/src/app/features/header-display/header-nav-links/header-nav-links.component.html b/src/app/features/header-display/header-nav-links/header-nav-links.component.html
index 5d4e383..a98c7a8 100644
--- a/src/app/features/header-display/header-nav-links/header-nav-links.component.html
+++ b/src/app/features/header-display/header-nav-links/header-nav-links.component.html
@@ -1,20 +1,8 @@
 <nav>
   <section>
-  <p-button
-    label="Neural Profile"
-    (onClick)="onClick()"
-  ></p-button>
-  <p-button
-    label="Execute//Directory"
-    (onClick)="onClick()"
-  ></p-button>
-  <p-button
-    label="Operative History"
-    (onClick)="onClick()"
-  ></p-button>
-    <p-button
-      label="Transmission Link"
-      (onClick)="onClick()"
-    ></p-button>
+    <app-button label="Neural Profile" (click)="onClick()"/>
+    <app-button label="Execute//Directory" (click)="onClick()"/>
+    <app-button label="Operative History" (click)="onClick()"/>
+    <app-button label="Transmission Link" (click)="onClick()"/>
   </section>
 </nav>
diff --git a/src/app/features/header-display/header-nav-links/header-nav-links.component.ts b/src/app/features/header-display/header-nav-links/header-nav-links.component.ts
index eaa394b..908e585 100644
--- a/src/app/features/header-display/header-nav-links/header-nav-links.component.ts
+++ b/src/app/features/header-display/header-nav-links/header-nav-links.component.ts
@@ -1,16 +1,15 @@
 import { Component } from '@angular/core';
 
-
-import { ButtonModule } from 'primeng/button';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-header-nav-links',
-  imports: [ButtonModule],
+  imports: [ButtonComponent],
   templateUrl: './header-nav-links.component.html',
-  styleUrl: './header-nav-links.component.css'
+  styleUrl: './header-nav-links.component.css',
 })
 export class HeaderNavLinksComponent {
-  onClick(){
+  onClick() {
     console.log('click');
   }
 }
diff --git a/src/app/features/hero-display/hero-display.component.html b/src/app/features/hero-display/hero-display.component.html
index 1b37e88..d32e204 100644
--- a/src/app/features/hero-display/hero-display.component.html
+++ b/src/app/features/hero-display/hero-display.component.html
@@ -1,4 +1,4 @@
-<section>
-  <article><p>HERO SECTION</p></article>
-  <article><p>CREATIVE DEVELOPER</p></article>
+<section class="">
+  <article><p class="text-6xl">HERO SECTION</p></article>
+  <article><p class="text-9xl">CREATIVE DEVELOPER</p></article>
 </section>
diff --git a/src/app/layout/components/main-layout/main-layout.component.html b/src/app/layout/components/main-layout/main-layout.component.html
index a644189..3c75ac3 100644
--- a/src/app/layout/components/main-layout/main-layout.component.html
+++ b/src/app/layout/components/main-layout/main-layout.component.html
@@ -1,8 +1,8 @@
 <app-header />
 <main class="bg-nier-bg">
   <app-hero />
-  <app-about />
   <app-projects />
+  <app-about />
   <app-contact />
   <app-sidebar />
 </main>
diff --git a/src/app/shared/ui/button/button.component.css b/src/app/shared/ui/button/button.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/ui/button/button.component.html b/src/app/shared/ui/button/button.component.html
new file mode 100644
index 0000000..d17bd4b
--- /dev/null
+++ b/src/app/shared/ui/button/button.component.html
@@ -0,0 +1,2 @@
+<button [class]="getButtonClass()"
+  (onClick)="handleClick()">{{label()}}</button>
diff --git a/src/app/shared/ui/button/button.component.ts b/src/app/shared/ui/button/button.component.ts
new file mode 100644
index 0000000..7da9b85
--- /dev/null
+++ b/src/app/shared/ui/button/button.component.ts
@@ -0,0 +1,31 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  imports: [],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css',
+})
+export class ButtonComponent {
+  label = input<string>('label');
+  selected = input<boolean>(false);
+  isNav = input<boolean>(false);
+  onClick = output<void>();
+
+  getButtonClass() {
+    const baseClass =
+      'font-terminal-retro uppercase transition-all duration-300';
+
+    if (this.isNav()) {
+      return `${baseClass} bg-transparent text-nier-text-dark border-0 hover:underline`;
+    }
+
+    return this.selected()
+      ? `${baseClass} bg-nier-dark text-nier-text-light border border-nier-border rounded-none`
+      : `${baseClass} bg-nier-mid text-nier-text-dark border border-nier-border rounded-none hover:bg-nier-dark hover:text-nier-text-light`;
+  }
+
+  handleClick() {
+    this.onClick.emit();
+  }
+}
diff --git a/src/styles.css b/src/styles.css
index 3904463..9f75f73 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,8 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap');
 
-@layer theme, tailwind-base, primeng, tailwind-utilities;
-
-@import "tailwindcss-primeui";
+@layer theme, tailwind-base, tailwind-utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(tailwind-base);
@@ -27,7 +25,22 @@
     --color-nier-highlight: #5a5a50;  /* Highlight for selection */
   }
 }
+
 @layer tailwind-utilities {
+  /* Font utilities */
+  .font-terminal {
+    font-family: var(--font-terminal);
+  }
+
+  .font-terminal-retro {
+    font-family: var(--font-terminal-retro);
+  }
+
+  .font-terminal-nier {
+    font-family: var(--font-terminal-nier);
+  }
+
+  /* Background utilities */
   .bg-nier-bg {
     background-color: var(--color-nier-bg);
   }
@@ -40,6 +53,7 @@
     background-color: var(--color-nier-mid);
   }
 
+  /* Text utilities */
   .text-nier-dark {
     color: var(--color-nier-text-dark);
   }
@@ -48,10 +62,15 @@
     color: var(--color-nier-text-light);
   }
 
+  /* Border utilities */
   .border-nier-border {
     border-color: var(--color-nier-border);
   }
 
+  .border-nier-accent {
+    border-color: var(--color-nier-accent);
+  }
+
   /* Grid background utility */
   .bg-nier-grid {
     background-color: var(--color-nier-bg);
@@ -59,8 +78,39 @@
     linear-gradient(90deg, var(--color-nier-grid) 1px, transparent 1px);
     background-size: 20px 20px;
   }
-}
 
-@layer primeng {
-  /* Your PrimeNG customizations here */
+  /* Button utilities */
+  .nier-button {
+    background-color: var(--color-nier-mid);
+    color: var(--color-nier-text-dark);
+    border: 1px solid var(--color-nier-border);
+    font-family: var(--font-terminal-retro);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+    transition: all 0.3s;
+  }
+
+  .nier-button:hover {
+    background-color: var(--color-nier-dark);
+    color: var(--color-nier-text-light);
+  }
+
+  .nier-button-active {
+    background-color: var(--color-nier-dark);
+    color: var(--color-nier-text-light);
+    border: 1px solid var(--color-nier-border);
+    font-family: var(--font-terminal-retro);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+  }
+
+  /* Interactive element focus styles */
+  .nier-focus-ring {
+    outline: none;
+  }
+
+  .nier-focus-ring:focus-visible {
+    outline: 2px solid var(--color-nier-dark);
+    outline-offset: 1px;
+  }
 }