diff --git a/package-lock.json b/package-lock.json
index c22af3e4..58cd8c89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^19.0.0",
+        "@angular/cdk": "^19.1.5",
         "@angular/common": "^19.0.0",
         "@angular/compiler": "^19.0.0",
         "@angular/core": "^19.0.0",
@@ -18,7 +19,8 @@
         "@angular/router": "^19.0.0",
         "@ngrx/store": "^19.0.1",
         "@primeng/themes": "^19.0.6",
-        "primeng": "^19.0.6",
+        "primeicons": "^7.0.0",
+        "primeng": "^19.0.8",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -531,10 +533,9 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "19.1.3",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.3.tgz",
-      "integrity": "sha512-A8d1V4AU2ZcNnEEwAUp4W1uYdT7EKHZM0PGicVhLyeetwYrpHiLoPioD7sw89TlPuJcd6mS7xV6AnXQ8peOoXg==",
-      "peer": true,
+      "version": "19.1.5",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.5.tgz",
+      "integrity": "sha512-+g20LIvYHThKBD6oXTYWVL6+ecaOWtPJu08R5xIfGrwXoj0l/9prLwuSW8GlIATI3mDkSesyhQsomb9jAUzKwQ==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -16496,10 +16497,15 @@
         "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=="
+    },
     "node_modules/primeng": {
-      "version": "19.0.6",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-19.0.6.tgz",
-      "integrity": "sha512-IyzkI12VlR3cy2wy47VtPzVzugs2QI6o0qI369RD6gFN9SI5K9pM/dAFn4v6MfaN+AtnVuPrfjH96gxj6CrbcA==",
+      "version": "19.0.8",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-19.0.8.tgz",
+      "integrity": "sha512-0Xz/XZ4Nu3GYGvnCMDFW5HTgV8VyPa2gC/rxgawcl25GhyXReGps+AeXyhabrNyCSCfykU1ng/6gGUeTse+GGg==",
       "dependencies": {
         "@primeuix/styled": "^0.3.2",
         "@primeuix/utils": "^0.3.2",
diff --git a/package.json b/package.json
index 8d4028f9..8b15b8c6 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.1.5",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
     "@angular/core": "^19.0.0",
@@ -39,7 +40,8 @@
     "@angular/router": "^19.0.0",
     "@ngrx/store": "^19.0.1",
     "@primeng/themes": "^19.0.6",
-    "primeng": "^19.0.6",
+    "primeicons": "^7.0.0",
+    "primeng": "^19.0.8",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
diff --git a/public/LogoALAsso.png b/public/LogoALAsso.png
index 50814d25..0d97a4c9 100644
Binary files a/public/LogoALAsso.png and b/public/LogoALAsso.png differ
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index f07c4cbe..081b8c0f 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,9 +1,14 @@
 import { Routes } from '@angular/router';
 import { ActivitiesHomeComponent } from './features/activity/pages/activities-home/activities-home.component';
+import { DemoComponent } from './features/activity/pages/demo/demo.component';
 
 export const routes: Routes = [
   {
     path: '',
     component: ActivitiesHomeComponent,
   },
+  {
+    path: 'demo',
+    component: DemoComponent,
+  },
 ];
diff --git a/src/app/common/components/input-field/input-field.component.html b/src/app/common/components/input-field/input-field.component.html
new file mode 100644
index 00000000..6f852710
--- /dev/null
+++ b/src/app/common/components/input-field/input-field.component.html
@@ -0,0 +1,9 @@
+<p-floatlabel [variant]="variant">
+  @if (type === 'date') {
+    <p-calendar [inputId]="'input_' + (label | lowercase)" [(ngModel)]="value" [disabled]="disabled" dateFormat="dd.mm.yy"> </p-calendar>
+  } @else {
+    <input pInputText [id]="'input_' + (label | lowercase)" [(ngModel)]="value" [type]="type" [disabled]="disabled" autocomplete="off" />
+  }
+
+  <label [for]="'input_' + (label | lowercase)">{{ label }}</label>
+</p-floatlabel>
diff --git a/src/app/common/components/input-field/input-field.component.scss b/src/app/common/components/input-field/input-field.component.scss
new file mode 100644
index 00000000..90dab3ef
--- /dev/null
+++ b/src/app/common/components/input-field/input-field.component.scss
@@ -0,0 +1,27 @@
+p-floatlabel {
+  input,
+  ::ng-deep p-calendar span input {
+    width: 100%;
+    font-size: 16px;
+    background-color: var(--background-color-light);
+    border: var(--grey-border);
+    border-radius: 8px;
+    transition: border-color 0.3s ease-in-out;
+    color: black;
+
+    &:focus,
+    &:hover,
+    &:active {
+      border-color: var(--primary-light-color) !important;
+      outline: none;
+      ~ label {
+        color: var(--primary-light-color);
+      }
+    }
+
+    label {
+      transition: all 0.3s ease-in-out;
+      color: var(--primary-light-color);
+    }
+  }
+}
diff --git a/src/app/common/components/input-field/input-field.component.ts b/src/app/common/components/input-field/input-field.component.ts
new file mode 100644
index 00000000..5589ed76
--- /dev/null
+++ b/src/app/common/components/input-field/input-field.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputTextModule } from 'primeng/inputtext';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { FormsModule } from '@angular/forms';
+import { CalendarModule } from 'primeng/calendar';
+
+@Component({
+  selector: 'app-input-field',
+  standalone: true,
+  imports: [CommonModule, InputTextModule, FloatLabelModule, CalendarModule, FormsModule],
+  templateUrl: './input-field.component.html',
+  styleUrls: ['./input-field.component.scss'],
+})
+export class InputFieldComponent {
+  @Input() label: string = '';
+  @Input() type: string = 'text';
+  @Input() disabled: boolean = false;
+  @Input() variant: 'in' | 'on' = 'in';
+  value: string = '';
+}
diff --git a/src/app/features/activity/pages/activities-home/activities-home.component.html b/src/app/features/activity/pages/activities-home/activities-home.component.html
index 0a25922c..ee7c9271 100644
--- a/src/app/features/activity/pages/activities-home/activities-home.component.html
+++ b/src/app/features/activity/pages/activities-home/activities-home.component.html
@@ -9,9 +9,9 @@
         <app-activity-card [activity]="activity"></app-activity-card>
       }
     </div>
-    <div class="map-activities" [ngClass]="chosenNavigation !== 'Carte' ? 'hidden' : ''">
-      <!--TODO: rajouter ici composant map pour la page activities-->
-    </div>
+  </div>
+  <div class="map-activities" [ngClass]="chosenNavigation !== 'Carte' ? 'hidden' : ''">
+    <!--TODO: rajouter ici composant map pour la page activities-->
   </div>
 
   <div class="switch-map">
diff --git a/src/app/features/activity/pages/activities-home/activities-home.component.ts b/src/app/features/activity/pages/activities-home/activities-home.component.ts
index 8400bddd..8491e56c 100644
--- a/src/app/features/activity/pages/activities-home/activities-home.component.ts
+++ b/src/app/features/activity/pages/activities-home/activities-home.component.ts
@@ -1,10 +1,10 @@
+import { AsyncPipe, NgClass } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
-import { ActivityCardComponent } from '../../components/activity-card/activity-card.component';
-import { ActivityFacadeService } from '../../services/activity-facade.service';
-import { Activity } from '../../models/activity.model';
 import { Observable } from 'rxjs';
-import { AsyncPipe, NgClass } from '@angular/common';
 import { ToggleMenuComponent } from '../../../../common/components/toggle-menu/toggle-menu.component';
+import { ActivityCardComponent } from '../../components/activity-card/activity-card.component';
+import { Activity } from '../../models/activity.model';
+import { ActivityFacadeService } from '../../services/activity-facade.service';
 
 @Component({
   selector: 'app-activities-home',
diff --git a/src/app/features/activity/pages/demo/demo.component.html b/src/app/features/activity/pages/demo/demo.component.html
new file mode 100644
index 00000000..7eabea62
--- /dev/null
+++ b/src/app/features/activity/pages/demo/demo.component.html
@@ -0,0 +1,7 @@
+<div class="input-demo">
+  <h3>Single Input Demo</h3>
+  <app-input-field label="Nom" type="text"></app-input-field>
+  <app-input-field label="Email" type="email"></app-input-field>
+  <app-input-field label="Mot de passe" type="password"></app-input-field>
+  <app-input-field label="Date de naissance" type="date"></app-input-field>
+</div>
diff --git a/src/app/features/activity/pages/demo/demo.component.scss b/src/app/features/activity/pages/demo/demo.component.scss
new file mode 100644
index 00000000..a391ceed
--- /dev/null
+++ b/src/app/features/activity/pages/demo/demo.component.scss
@@ -0,0 +1,12 @@
+.input-demo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 50px 0;
+
+  h3 {
+    color: var(--primary-light-color);
+  }
+}
diff --git a/src/app/features/activity/pages/demo/demo.component.ts b/src/app/features/activity/pages/demo/demo.component.ts
new file mode 100644
index 00000000..b4b0256a
--- /dev/null
+++ b/src/app/features/activity/pages/demo/demo.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { InputFieldComponent } from 'src/app/common/components/input-field/input-field.component';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [InputFieldComponent],
+  templateUrl: './demo.component.html',
+  styleUrl: './demo.component.scss',
+})
+export class DemoComponent {}
diff --git a/src/app/features/footer/footer.component.ts b/src/app/features/footer/footer.component.ts
index 3e777414..c202246c 100644
--- a/src/app/features/footer/footer.component.ts
+++ b/src/app/features/footer/footer.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-footer',
-  imports: [],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
 })
diff --git a/src/app/features/header/header.component.ts b/src/app/features/header/header.component.ts
index 0c6f6c6b..a7e1cade 100644
--- a/src/app/features/header/header.component.ts
+++ b/src/app/features/header/header.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-header',
-  imports: [],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })