diff --git a/client/Nightr/src/app/component/my-button/my-button.component.css b/client/Nightr/src/app/component/my-button/my-button.component.css
new file mode 100644
index 0000000..7e60ba7
--- /dev/null
+++ b/client/Nightr/src/app/component/my-button/my-button.component.css
@@ -0,0 +1,8 @@
+.myButtonComponent {
+    background-color: #30bcff;
+    border-radius: 100;
+    width: 200;
+    height: 200;
+    text-align: center;
+    vertical-align: middle;
+}
diff --git a/client/Nightr/src/app/component/my-button/my-button.component.html b/client/Nightr/src/app/component/my-button/my-button.component.html
new file mode 100644
index 0000000..a0bcea7
--- /dev/null
+++ b/client/Nightr/src/app/component/my-button/my-button.component.html
@@ -0,0 +1,3 @@
+<StackLayout>
+<Button [text]="text" class="btn btn-primary myButtonComponent" (tap)="onTap($event)"></Button>
+</StackLayout>
diff --git a/client/Nightr/src/app/component/my-button/my-button.component.ts b/client/Nightr/src/app/component/my-button/my-button.component.ts
new file mode 100644
index 0000000..01fb236
--- /dev/null
+++ b/client/Nightr/src/app/component/my-button/my-button.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { TouchGestureEventData, GestureEventData } from 'tns-core-modules/ui/gestures'
+
+@Component({
+  selector: 'ns-my-button',
+  templateUrl: './my-button.component.html',
+  styleUrls: ['./my-button.component.css'],
+  moduleId: module.id,
+})
+export class MyButtonComponent implements OnInit {
+
+    @Output() tap: EventEmitter<GestureEventData> = new EventEmitter<GestureEventData>();
+    @Input() text: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  public onTap(args: GestureEventData): any {
+      this.tap.emit(args);
+  }
+}