diff --git a/frontend/src/app/components/auth/auth.component.ts b/frontend/src/app/components/auth/auth.component.ts
index d4e88ca..33d71fd 100644
--- a/frontend/src/app/components/auth/auth.component.ts
+++ b/frontend/src/app/components/auth/auth.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
-import { BtnLargeComponent } from '../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../shared/components/buttons/btn-large/btn-large.component';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { ErrorService } from '../../services/error.service';
diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts
index 1ebe656..0276603 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';
diff --git a/frontend/src/app/components/auth/login/login.component.ts b/frontend/src/app/components/auth/login/login.component.ts
index 7e37acf..65df1f6 100644
--- a/frontend/src/app/components/auth/login/login.component.ts
+++ b/frontend/src/app/components/auth/login/login.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';
diff --git a/frontend/src/app/components/auth/register/register.component.ts b/frontend/src/app/components/auth/register/register.component.ts
index 0f79d13..c2b40ce 100644
--- a/frontend/src/app/components/auth/register/register.component.ts
+++ b/frontend/src/app/components/auth/register/register.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';
diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 73d6eab..532305a 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -31,4 +31,7 @@
     <h2>Unfortunately there are no films available in the database.</h2>
   </div>
   }
+  <div class="add-button">
+    <app-btn-small [imgPath]="'add'" (click)="addNewMovie()"></app-btn-small>
+  </div>
 </section>
diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss
index 79d9443..baec3eb 100644
--- a/frontend/src/app/components/home/browse/browse.component.scss
+++ b/frontend/src/app/components/home/browse/browse.component.scss
@@ -45,6 +45,12 @@ section {
   transition: opacity 300ms ease-in-out;
 }
 
+.add-button {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+}
+
 .back-button {
   cursor: pointer;
   background: none;
diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index b1a1c23..3a62b46 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/frontend/src/app/components/home/browse/browse.component.ts
@@ -7,6 +7,8 @@ import { MovieService } from '../../../services/movie.service';
 import { Observable, Subscription } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { VideoPlayerComponent } from './vjs-player/vjs-player.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
+import { BtnSmallComponent } from '../../../shared/components/buttons/btn-small/btn-small.component';
 
 @Component({
   selector: 'app-browse',
@@ -17,6 +19,7 @@ import { VideoPlayerComponent } from './vjs-player/vjs-player.component';
     HeroBannerComponent,
     CategoriesComponent,
     VideoPlayerComponent,
+    BtnSmallComponent,
   ],
   templateUrl: './browse.component.html',
   styleUrl: './browse.component.scss',
@@ -61,4 +64,6 @@ export class BrowseComponent implements OnInit {
       this.currentMovie.push(this.movies[index]);
     }
   }
+
+  addNewMovie() {}
 }
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
index ac3543e..55b67bf 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
+++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
@@ -6,7 +6,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
-import { BtnLargeComponent } from '../../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
 import { MovieService } from '../../../../services/movie.service';
 import { environment } from '../../../../environments/environment';
 
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.html b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.html
similarity index 100%
rename from frontend/src/app/shared/components/btn-large/btn-large.component.html
rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.html
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.scss b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
similarity index 95%
rename from frontend/src/app/shared/components/btn-large/btn-large.component.scss
rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
index 6ed0d86..5ff3403 100644
--- a/frontend/src/app/shared/components/btn-large/btn-large.component.scss
+++ b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
@@ -1,4 +1,4 @@
-@import "./../../../../assets/style/colors.scss";
+@import "./../../../../../assets/style/colors.scss";
 
 .btn {
   display: flex;
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.spec.ts
similarity index 100%
rename from frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts
rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.spec.ts
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.ts b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.ts
similarity index 100%
rename from frontend/src/app/shared/components/btn-large/btn-large.component.ts
rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.ts
diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html
new file mode 100644
index 0000000..28aee56
--- /dev/null
+++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html
@@ -0,0 +1,7 @@
+<button class="btn" [disabled]="disabled">
+  <img
+    src="./../../../../assets/img/{{ imgPath }}.svg"
+    alt="{{ imgPath }}"
+    class="icon"
+  />
+</button>
diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
new file mode 100644
index 0000000..32a0c97
--- /dev/null
+++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
@@ -0,0 +1,34 @@
+@import "./../../../../../assets/style/colors.scss";
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  background-color: blue;
+  border: 1px solid blue;
+  transition: 300ms ease-in-out;
+  cursor: pointer;
+  &:not(:disabled):hover {
+    background-color: white;
+    border: 1px solid blue;
+    .icon {
+      transition: 300ms ease-in-out;
+      filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
+        saturate(2342%) hue-rotate(228deg) brightness(83%) contrast(115%);
+    }
+  }
+  &:disabled {
+    background-color: lightblue;
+    color: darken(white, 10%);
+    border: 1px solid lightblue;
+    cursor: default;
+  }
+  .icon {
+    height: 32px;
+    width: auto;
+  }
+}
diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts
new file mode 100644
index 0000000..6bb9cba
--- /dev/null
+++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BtnSmallComponent } from './btn-small.component';
+
+describe('BtnSmallComponent', () => {
+  let component: BtnSmallComponent;
+  let fixture: ComponentFixture<BtnSmallComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BtnSmallComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(BtnSmallComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts
new file mode 100644
index 0000000..c26b08f
--- /dev/null
+++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-small',
+  standalone: true,
+  imports: [],
+  templateUrl: './btn-small.component.html',
+  styleUrl: './btn-small.component.scss',
+})
+export class BtnSmallComponent {
+  @Input() imgPath: string = '';
+  @Input() disabled: boolean = false;
+}
diff --git a/frontend/src/app/shared/components/header/header.component.ts b/frontend/src/app/shared/components/header/header.component.ts
index fa1f50e..60eb8c0 100644
--- a/frontend/src/app/shared/components/header/header.component.ts
+++ b/frontend/src/app/shared/components/header/header.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, input } from '@angular/core';
-import { BtnLargeComponent } from '../btn-large/btn-large.component';
+import { BtnLargeComponent } from '../buttons/btn-large/btn-large.component';
 import { Router, RouterLink } from '@angular/router';
 
 @Component({
diff --git a/frontend/src/assets/img/add.svg b/frontend/src/assets/img/add.svg
new file mode 100644
index 0000000..6a0e78b
--- /dev/null
+++ b/frontend/src/assets/img/add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>
\ No newline at end of file