diff --git a/src/Components/BasicComponent/basic.component.css b/src/Components/BasicComponent/basic.component.css
deleted file mode 100644
index 617deb11..00000000
--- a/src/Components/BasicComponent/basic.component.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.flex-fill{
-    border:5px solid white;
-    height: 300px;
-    background-color: lightgray;
-}
\ No newline at end of file
diff --git a/src/Components/BasicComponent/basic.component.html b/src/Components/BasicComponent/basic.component.html
deleted file mode 100644
index ccd24f5d..00000000
--- a/src/Components/BasicComponent/basic.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="d-flex text-center">
-    <div class="p-2 flex-fill">Flex item 1</div>
-    <div class="p-2 flex-fill">Flex item 2</div>
-    <div class="p-2 flex-fill">Flex item 3</div>
-</div>
-<div class="d-flex text-center">
-    <div class="p-2 flex-fill">Flex item 1</div>
-    <div class="p-2 flex-fill">Flex item 2</div>
-    <div class="p-2 flex-fill">Flex item 3</div>
-</div>
diff --git a/src/Components/BasicComponent/basic.component.ts b/src/Components/BasicComponent/basic.component.ts
deleted file mode 100644
index dd950211..00000000
--- a/src/Components/BasicComponent/basic.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'basic-component',
-    standalone: true,
-    templateUrl: './basic.component.html',
-    styleUrl: './basic.component.css',
-  })
-export class BasicComponent{
-
-}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 35d6e4cf..3f806cec 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,4 @@
+<header-component></header-component>
 <div class="container-fluid p-2">
     <basic-component></basic-component>
 </div>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ee558404..1b777c96 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { BasicComponent } from '../Components/BasicComponent/basic.component';
+import { BasicComponent } from '../app/components/basicComponent/basic.component';
+import { HeaderComponent } from "../app/components/header/header.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [BasicComponent],
+  imports: [BasicComponent, HeaderComponent],
 })
 export class AppComponent {
   title = 'Gridly';
diff --git a/src/app/components/basicComponent/basic.component.css b/src/app/components/basicComponent/basic.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/basicComponent/basic.component.html b/src/app/components/basicComponent/basic.component.html
new file mode 100644
index 00000000..c1c7ccec
--- /dev/null
+++ b/src/app/components/basicComponent/basic.component.html
@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap" style="height: 300px;">
+    <div *ngFor="let item of sharedService.flexItems" [innerHTML]="item"></div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/basicComponent/basic.component.ts b/src/app/components/basicComponent/basic.component.ts
new file mode 100644
index 00000000..63d1225e
--- /dev/null
+++ b/src/app/components/basicComponent/basic.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';  // Import CommonModule for *ngFor
+import { SharedService } from '../../shared.service';
+
+@Component({
+  selector: 'basic-component',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './basic.component.html',
+  styleUrls: ['./basic.component.css'],
+})
+export class BasicComponent {
+  constructor(public sharedService: SharedService) {}
+}
\ No newline at end of file
diff --git a/src/app/components/header/header.component.css b/src/app/components/header/header.component.css
new file mode 100644
index 00000000..380c448d
--- /dev/null
+++ b/src/app/components/header/header.component.css
@@ -0,0 +1,8 @@
+.d-flex{
+    background-color: antiquewhite;
+}
+.flex-row-reverse{
+    padding-right: 1em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
\ No newline at end of file
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
new file mode 100644
index 00000000..3626429a
--- /dev/null
+++ b/src/app/components/header/header.component.html
@@ -0,0 +1,4 @@
+<div class="flex-wrap d-flex flex-row-reverse">
+    <button (click)="removeComponent()">Del</button>
+    <button (click)="addComponent()">Add</button>
+</div>
\ No newline at end of file
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
new file mode 100644
index 00000000..211e4261
--- /dev/null
+++ b/src/app/components/header/header.component.ts
@@ -0,0 +1,21 @@
+import { Component } from "@angular/core";
+import { SharedService } from '../../shared.service';
+
+@Component({
+    selector: 'header-component',
+    standalone: true,
+    templateUrl: './header.component.html',
+    styleUrl: './header.component.css',
+  })
+
+export class HeaderComponent{
+
+  constructor(public sharedService: SharedService) {}
+
+  addComponent() {
+    this.sharedService.addItem();
+  }
+  removeComponent() {
+    this.sharedService.removeItem();
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared.service.ts b/src/app/shared.service.ts
new file mode 100644
index 00000000..75695861
--- /dev/null
+++ b/src/app/shared.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';  // Import DomSanitizer and SafeHtml
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class SharedService {
+  public flexItems: SafeHtml[] = [];
+
+  constructor(private sanitizer: DomSanitizer){
+    this.flexItems = [
+      this.sanitizeHtml('')
+    ];
+  }
+
+  sanitizeHtml(html: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
+  addItem() {
+      const newItem = this.sanitizeHtml(`<div 
+        style="
+        height: 300px;
+        width:330px;
+        flex: 1 1 330px;
+        margin: 10px;
+        background:darkgrey;">Flex item ${this.flexItems.length}</div>`);
+        this.flexItems.push(newItem);     
+  }
+  removeItem(){
+    if(this.flexItems.length > 1){
+      this.flexItems.splice(this.flexItems.length -1,1);
+    }
+    if(this.flexItems.length === 1){
+      this.flexItems.splice(this.flexItems.length,1);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 702bbfe2..ad95f82c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 @import "bootstrap/dist/css/bootstrap.css";
-@import "bootstrap-icons/font/bootstrap-icons.css";
\ No newline at end of file
+@import "bootstrap-icons/font/bootstrap-icons.css";
+.flex-fill{
+    border:5px solid white;
+    height: 300px;
+    width: 300px;
+    background-color: lightgray;
+}
\ No newline at end of file