diff --git a/webapp/src/app/components/projects/projects.component.ts b/webapp/src/app/components/projects/projects.component.ts
index cbd5ed4..5ce0096 100644
--- a/webapp/src/app/components/projects/projects.component.ts
+++ b/webapp/src/app/components/projects/projects.component.ts
@@ -40,11 +40,12 @@ export class ProjectsComponent implements OnInit {
     this.subscriptionList$ = this.pubsub.listSubscriptionsOnTopic(topic.name)
   }
 
-  handlePublishRequest(event: { topic: Topic, message: string }) {
+  handlePublishRequest(event: { topic: Topic, message: string, attributes: { [key: string]: string } }) {
     console.log("publish message request:", event.message)
 
     const pubsubMessage: PubsubMessage = {
-      data: btoa(event.message)
+      data: btoa(event.message),
+      attributes: event.attributes
     }
 
     this.pubsub.publishMessages(event.topic.name, [pubsubMessage]).subscribe(result => {
diff --git a/webapp/src/app/components/topic-details/topic-details.component.html b/webapp/src/app/components/topic-details/topic-details.component.html
index 0d9c73f..77356ef 100644
--- a/webapp/src/app/components/topic-details/topic-details.component.html
+++ b/webapp/src/app/components/topic-details/topic-details.component.html
@@ -7,6 +7,11 @@ <h3>Publish Message to topic: {{this.topic?.name}}</h3>
 </div>
 
 <mat-form-field appearance="outline" class="text-field">
-    <textarea matInput [cdkTextareaAutosize]="true" cdkAutosizeMinRows="15" [formControl]="this.inputField"></textarea>
+    <mat-label>Attributes</mat-label>
+    <input matInput placeholder='Ex. {"key1": "value1","key2": "value2"}' [formControl]="this.attributesField">
 </mat-form-field>
 
+<mat-form-field appearance="outline" class="text-field">
+    <mat-label>Message</mat-label>
+    <textarea matInput [cdkTextareaAutosize]="true" cdkAutosizeMinRows="15" [formControl]="this.inputField"></textarea>
+</mat-form-field>
\ No newline at end of file
diff --git a/webapp/src/app/components/topic-details/topic-details.component.ts b/webapp/src/app/components/topic-details/topic-details.component.ts
index c66d230..7cf7a20 100644
--- a/webapp/src/app/components/topic-details/topic-details.component.ts
+++ b/webapp/src/app/components/topic-details/topic-details.component.ts
@@ -1,29 +1,29 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormControl, Validators } from '@angular/forms';
 import { Topic } from 'src/app/services/pubsub.service';
-
 @Component({
   selector: 'app-topic-details',
   templateUrl: './topic-details.component.html',
   styleUrls: ['./topic-details.component.scss']
 })
 export class TopicDetailsComponent implements OnInit {
-
   @Input() topic?: Topic
-
-  @Output() onMessagePublish = new EventEmitter<{ topic: Topic, message: string }>()
-
+  @Output() onMessagePublish = new EventEmitter<{ topic: Topic, message: string, attributes: { [key: string]: string } }>()
   public inputField = new UntypedFormControl('', Validators.required)
-  constructor() { }
+  public attributesField = new UntypedFormControl('', Validators.required)
 
+  constructor() { }
   ngOnInit(): void {
   }
-
   publishMessage() {
     console.log("this value was found", this.inputField.value)
 
-    this.onMessagePublish.emit({ topic: this.topic!, message: this.inputField.value })
+    let attributes = null;
+    if (this.attributesField.value != "") {
+      attributes = JSON.parse(this.attributesField.value)
+    }
+    this.onMessagePublish.emit({ topic: this.topic!, message: this.inputField.value, attributes: attributes })
     this.inputField.reset()
+    this.attributesField.reset()
   }
-
-}
+}
\ No newline at end of file