diff --git a/src/app/components/basicComponent/basic.component.html b/src/app/components/basicComponent/basic.component.html
index 3468fb29..60b4ff04 100644
--- a/src/app/components/basicComponent/basic.component.html
+++ b/src/app/components/basicComponent/basic.component.html
@@ -2,7 +2,17 @@
     <div *ngFor="let item of sharedService.flexItems" 
     class="action-btn"
     style="height: 300px; width:330px; flex: 1 1 330px; margin: 10px; background:darkgrey;">
-        Flex item 
-    <button (click)="Remove(item.id)">Remove Button </button>
+    <ul>
+        <li>
+            {{item.IComponentModel.Id}}
+        </li>
+        <li>
+            {{item.IComponentModel.Name}}
+        </li>
+        <li>
+            {{item.IComponentModel.Url}} 
+        </li>
+    </ul>
+    <button (click)="Remove(item.IComponentModel.Id)">Remove Button </button>
 </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
index 7c6e75b9..9a94d8f3 100644
--- a/src/app/components/basicComponent/basic.component.ts
+++ b/src/app/components/basicComponent/basic.component.ts
@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-
+import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';  // Import CommonModule for *ngFor
 import { SharedService } from '../../shared.service';
 
 @Component({
   selector: 'basic-component',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   templateUrl: './basic.component.html',
   styleUrls: ['./basic.component.css'],
 })
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index acfb5a7e..5672d28d 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,18 +1,9 @@
 <div class="flex-wrap d-flex flex-row-reverse">
 
   <div class="dropdown">
-    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-    ...
+    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+      <i class="bi bi-plus-lg"></i>
     </button>
-    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-    <li>
-      <a class="dropdown-item" href="#">
-        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-          Öppna Modal
-        </button>
-      </a>
-    </li> 
-  </ul>
 </div>
 
 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
@@ -25,20 +16,32 @@ <h5 class="modal-title" id="exampleModalLabel">
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <div class="dropdown">
-          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-          Theme
-          </button>
-          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-          <li><a class="dropdown-item" href="#">Webpage</a></li> 
-            <li><a class="dropdown-item" href="#">Service</a></li>
+        <form>
+          <div class="form-group">
+            <label>App name</label>
+            <input type="text" class="form-control" placeholder="App name" [(ngModel)]="IComponentModel.Name" name="name">
+          </div>
+          <div class="form-group">
+            <label>Service Url</label>
+            <input type="text" class="form-control" placeholder="Url" [(ngModel)]="IComponentModel.Url" name="url">
+          </div>
+          <!--<div class="form-group">
+            <label>App name</label>
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Välj en ikon
+            </button>
+            <ul class="dropdown-menu form-control">
+              <li><a class="dropdown-item" href="#"><i class="bi bi-house-door-fill me-2"></i></a></li>
+              <li><a class="dropdown-item" href="#"><i class="bi bi-person-fill me-2"></i></a></li>
+              <li><a class="dropdown-item" href="#"><i class="bi bi-gear-fill me-2"></i></a></li>
+              <li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i></a></li>
           </ul>
-        </div>
-        Detta är innehållet i modalen. Lägg till vad du vill här!
+          </div>-->
+        </form>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="AddComponent()">Add new component</button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="AddComponent(IComponentModel)">Add</button>
       </div>
     </div>
   </div>
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 214c207e..dcfe6f85 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -1,18 +1,25 @@
 import { Component } from "@angular/core";
 import { SharedService } from '../../shared.service';
+import { IComponentModel } from '../../interfaces/IComponent.Model'
+import { FormsModule } from '@angular/forms';
 
 @Component({
     selector: 'header-component',
     standalone: true,
     templateUrl: './header.component.html',
     styleUrl: './header.component.css',
+    imports: [FormsModule]
   })
 
 export class HeaderComponent{
+  IComponentModel: IComponentModel = {
+    Id:0,
+    Name:'test',
+    Url:'localhost'
+  }
+  constructor(public sharedService: SharedService){}
 
-  constructor(public sharedService: SharedService) {}
-
-  AddComponent() {
-    this.sharedService.AddItem();
+  AddComponent(IComponentModel: IComponentModel) {
+    this.sharedService.AddComponent(IComponentModel);
   }
 }
\ No newline at end of file
diff --git a/src/app/interfaces/IComponent.Model.ts b/src/app/interfaces/IComponent.Model.ts
new file mode 100644
index 00000000..3c8ea7f9
--- /dev/null
+++ b/src/app/interfaces/IComponent.Model.ts
@@ -0,0 +1,5 @@
+export interface IComponentModel{
+    Id:number;
+    Name:string;
+    Url:string;
+}
\ No newline at end of file
diff --git a/src/app/shared.service.ts b/src/app/shared.service.ts
index 044fe377..bfa8d653 100644
--- a/src/app/shared.service.ts
+++ b/src/app/shared.service.ts
@@ -1,11 +1,12 @@
 import { Injectable } from '@angular/core';
+import { IComponentModel } from './interfaces/IComponent.Model';
 
 @Injectable({
   providedIn: 'root'
 })
 
 export class SharedService {
-  flexItems: { id: number }[] = [];
+  flexItems: { IComponentModel: IComponentModel }[] = [];
 
   Remove(id: number) {
     let index = this.GetId(id);
@@ -14,18 +15,18 @@ export class SharedService {
     }
   }
 
-  AddItem() {
+  AddComponent(IComponentModel: IComponentModel) {
     const newId = Math.floor(Math.random() * 100) + 1;
     let index = this.GetId(newId);
-    console.log(index);
     if(index === -1){
-      this.flexItems.push({ id: newId });
+      IComponentModel.Id = newId;
+      this.flexItems.push({ IComponentModel: IComponentModel });
     }
     else
-      this.AddItem();
+      this.AddComponent(IComponentModel);
   }
 
   GetId(id: number): number{
-    return this.flexItems.findIndex(item => item.id == id);
+    return this.flexItems.findIndex(item => item.IComponentModel.Id == id);
   }
 }
\ No newline at end of file