diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 034f3e26..2ca31e1c 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -56,6 +56,7 @@ import { ContactService } from './contact.service';
 import { UserProfileComponent } from './user-profile/user-profile.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { IMaskModule } from 'angular-imask';
+import { OfferJoinFormComponent } from './offers/offer-join-form/offer-join-form.component';
 
 Raven.config(environment.sentryDSN).install();
 
@@ -167,6 +168,11 @@ const appRoutes: Routes = [
     component: UserProfileComponent,
     canActivate: [LoggedInGuard],
   },
+  {
+    path: 'offers/:offerSlug/:offerId/join',
+    component: OfferJoinFormComponent,
+    canActivate: [LoggedInGuard],
+  },
   {
     path: '**',
     component: RedirectComponent
@@ -213,7 +219,8 @@ registerLocaleData(localePl);
     ContactComponent,
     FormErrorComponent,
     OrganizationsListComponent,
-    UserProfileComponent
+    UserProfileComponent,
+    OfferJoinFormComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'volontulo' }),
diff --git a/frontend/src/app/homepage-offer/offers.service.ts b/frontend/src/app/homepage-offer/offers.service.ts
index 5a506a6d..37b9bc04 100644
--- a/frontend/src/app/homepage-offer/offers.service.ts
+++ b/frontend/src/app/homepage-offer/offers.service.ts
@@ -35,4 +35,8 @@ export class OffersService {
     return this.http.put(`${environment.apiRoot}/offers/${id}/`, offer);
   }
 
+  joinOffer(id: number, message: string) {
+    return this.http.post(`${environment.apiRoot}/offers/${id}/join/`, {message}, {observe: 'response'});
+  }
+
 }
diff --git a/frontend/src/app/offers/offer-detail/offer-detail.component.html b/frontend/src/app/offers/offer-detail/offer-detail.component.html
index 51e2d40c..348d424b 100644
--- a/frontend/src/app/offers/offer-detail/offer-detail.component.html
+++ b/frontend/src/app/offers/offer-detail/offer-detail.component.html
@@ -68,7 +68,7 @@ <h2>Pomagasz już w tej inicjatywie</h2>
                 <div class="alert alert-danger">
                     <h2>Możesz pomóc?</h2>
                     <p>Twoja pomoc jest ważna. Potrzebujemy Ciebie!</p>
-                    <a class="btn btn-light" href="{{ getJoinViewUrl(offer) }}"
+                    <a [routerLink]="['/offers', offer.slug, offer.id,'join']" class="btn btn-light"
                     >Zgłoś się na ten wolontariat</a>
                 </div>
              </ng-template>
diff --git a/frontend/src/app/offers/offer-join-form/offer-join-form.component.html b/frontend/src/app/offers/offer-join-form/offer-join-form.component.html
new file mode 100644
index 00000000..6434bb14
--- /dev/null
+++ b/frontend/src/app/offers/offer-join-form/offer-join-form.component.html
@@ -0,0 +1,39 @@
+<div class="container">
+  <form [formGroup]="joinForm" (ngSubmit)="onSubmit()">
+    <div class="form-group row">
+      <label class="col-sm-4 col-md-3 col-lg-2 col-form-label" for="fullname">Imię i nazwisko:</label>
+        <div class="col-sm-8 col-md-9 col-lg-10">
+          <input class="form-control" formControlName="applicantName" id="fullname"/>
+        </div>
+      </div>
+      <div class="form-group row">
+        <label class="col-sm-4 col-md-3 col-lg-2 col-form-label" for="email">Email:</label>
+          <div class="col-sm-8 col-md-9 col-lg-10">
+            <input class="form-control" formControlName="applicantEmail" id="email"/>
+          </div>
+      </div>
+      <div class="form-group row">
+        <label class="col-sm-4 col-md-3 col-lg-2 col-form-label" for="phone">Telefon:</label>
+          <div class="col-sm-8 col-md-9 col-lg-10">
+            <input class="form-control" formControlName="phoneNo" id="phone" [imask]="{mask: '+48 000-000-000'}"/>
+          </div>
+      </div>
+      <div>
+        <label for="message">Możliwe uwagi:</label>
+        <textarea type="text" class="form-control" rows="3" id="message" placeholder="{{ communicate }}" formControlName="message"></textarea>
+        <volontulo-form-error [fc]="joinForm.controls.message" [minLength]="10" [maxLength]="2000"></volontulo-form-error>
+      </div>
+      <div class="form-group row d-none">
+        <label class="col-sm-4 col-md-3 col-lg-2 col-form-label">Bot trap</label>
+        <div class="col-sm-8 col-md-9 col-lg-10">
+          <input type="text" class="form-control" formControlName="honeyValue" />
+        </div>
+      </div>
+      <div class="d-flex justify-content-center p-3">
+        <button type="submit" name="submit" class="btn btn-primary" [disabled]="joinForm.invalid && submitEnabled">
+          Zgłaszam się do pomocy
+        </button>
+      </div>
+  </form>
+</div>
+
diff --git a/frontend/src/app/offers/offer-join-form/offer-join-form.component.ts b/frontend/src/app/offers/offer-join-form/offer-join-form.component.ts
new file mode 100644
index 00000000..e9b7b7a6
--- /dev/null
+++ b/frontend/src/app/offers/offer-join-form/offer-join-form.component.ts
@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { Location } from '@angular/common'
+
+import { ActivatedRoute } from '@angular/router';
+import { AuthService } from '../../auth.service';
+import { OffersService } from 'app/homepage-offer/offers.service';
+import { User } from '../../user';
+import { UserService } from '../../user.service';
+
+@Component({
+  selector: 'volontulo-offer-join-form',
+  templateUrl: './offer-join-form.component.html'
+})
+
+export class OfferJoinFormComponent implements OnInit {
+  public error;
+  public communicate = 'Dodatkowe informacje dla organizatora (pole nieobowiązkowe)';
+  public joinForm: FormGroup = this.fb.group({
+    applicantEmail: [{value: '', disabled: true}],
+    applicantName: [{value: '', disabled: true}],
+    message: ['', [Validators.minLength(10), Validators.maxLength(2000)]],
+    phoneNo: [{value: '', disabled: true}],
+    honeyValue: [''],
+  });
+  public offerId: number;
+  public submitEnabled = true;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private authService: AuthService,
+    private fb: FormBuilder,
+    private httpClient: HttpClient,
+    private location: Location,
+    private offersService: OffersService,
+    private userService: UserService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.authService.user$
+      .subscribe(
+        (user: User) => {
+          this.joinForm.controls.applicantEmail.setValue(user.email);
+          this.joinForm.controls.applicantName.setValue(this.userService.getFullName(user));
+          this.joinForm.controls.phoneNo.setValue(user.phoneNo);
+        }
+      );
+
+    this.activatedRoute.params
+      .switchMap(params => this.offerId = params.offerId)
+      .subscribe()
+  }
+
+  onSubmit() {
+    if (this.joinForm.valid && !this.joinForm.value.honeyValue) {
+      this.submitEnabled = false;
+
+      this.offersService.joinOffer(this.offerId, this.joinForm.value.message).subscribe(
+        response => {
+          if (response.status === 201) {
+            this.location.back()}},
+            err => this.error = err.error.nonFieldErrors
+      )
+    }
+  }
+}