diff --git a/frontend/src/app/atomic/text-button/text-button.component.css b/frontend/src/app/atomic/text-button/text-button.component.css
new file mode 100644
index 0000000..74b0441
--- /dev/null
+++ b/frontend/src/app/atomic/text-button/text-button.component.css
@@ -0,0 +1,16 @@
+button {
+    background-color: var(--primary-background-color);
+    color: var(--primary-text-color);
+    font-size: 1.5rem;
+    font-weight: bold;
+    padding: 1rem 3rem;
+    border: none;
+    border-color: var(--primary-background-color);
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+button:hover {
+    transform: translateY(3px);
+    transition: transform 0.1s ease-in-out;
+}
\ No newline at end of file
diff --git a/frontend/src/app/atomic/text-button/text-button.component.html b/frontend/src/app/atomic/text-button/text-button.component.html
new file mode 100644
index 0000000..3b26f78
--- /dev/null
+++ b/frontend/src/app/atomic/text-button/text-button.component.html
@@ -0,0 +1 @@
+<button>{{ text }}</button>
diff --git a/frontend/src/app/atomic/text-button/text-button.component.spec.ts b/frontend/src/app/atomic/text-button/text-button.component.spec.ts
new file mode 100644
index 0000000..70a71c7
--- /dev/null
+++ b/frontend/src/app/atomic/text-button/text-button.component.spec.ts
@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {TextButtonComponent} from './text-button.component';
+
+describe('ButtonComponent', () => {
+    let component: TextButtonComponent;
+    let fixture: ComponentFixture<TextButtonComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [TextButtonComponent]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(TextButtonComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/frontend/src/app/atomic/text-button/text-button.component.ts b/frontend/src/app/atomic/text-button/text-button.component.ts
new file mode 100644
index 0000000..b585f5c
--- /dev/null
+++ b/frontend/src/app/atomic/text-button/text-button.component.ts
@@ -0,0 +1,12 @@
+// import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
+
+@Component({
+    selector: 'atomic-text-button',
+    imports: [],
+    templateUrl: './text-button.component.html',
+    styleUrl: './text-button.component.css'
+})
+export class TextButtonComponent {
+    @Input() text: string = '';
+}