diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f2300c3..2c5b1b3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -66,6 +66,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatNativeDateModule} from '@angular/material/';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 
 // import logo from 'src/assets/gv-new-logo.svg';
 import logo from '!!raw-loader!./gv-new-logo-white.svg';
@@ -150,7 +151,8 @@ const appRoutes: Routes = [
     MatDialogModule,
     MatTooltipModule,
     MatExpansionModule,
-    MatDatepickerModule
+    MatDatepickerModule,
+    MatSnackBarModule,
   ],
   entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ],
   providers: [],
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index b40f0f6..81d38a8 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -6,7 +6,7 @@
                 <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
+                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>
@@ -48,7 +48,7 @@
                 <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
+                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index 412b106..b1a9aba 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -6,6 +6,9 @@ import { RequestService } from 'src/app/services/request/request.service';
 import { DatasharingService } from '../../services/datasharing.service';
 import { ProfileService } from 'src/app/services/profile/profile.service';
 import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import { reduce } from 'rxjs/operators';
 
 @Component({
   selector: 'app-profile',
@@ -26,6 +29,7 @@ export class ProfileComponent implements OnInit {
 
   constructor(
     private http: HttpClient,
+    private _snackBar: MatSnackBar,
     private router: Router,
     private requestService: RequestService,
     private data: DatasharingService,
@@ -72,11 +76,14 @@ export class ProfileComponent implements OnInit {
     const formData: any = new FormData();
     formData.append('profilePicture', event.target.files[0]);
 
-    this.http.post('https://greenvironment.net/upload', formData).subscribe(
-    async (response: Response) => {
-      this.userProfile.profilePicture = 'https://greenvironment.net/' + (await response.json()).filename;
+    this.http.post(environment.greenvironmentUrl + '/upload', formData).subscribe(
+     (response: any) => {
+      this.userProfile.profilePicture = environment.greenvironmentUrl + response.fileName;
     },
-    (error) => console.log(error)
-  );
+    (error) => {
+      this._snackBar.open('failed to upload picture', 'okay', {
+      duration: 3000
+      });
+    });
   }
 }
diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts
index 3de1124..67069a7 100644
--- a/src/app/services/profile/profile.service.ts
+++ b/src/app/services/profile/profile.service.ts
@@ -82,7 +82,7 @@ export class ProfileService {
       profile.friendCount = response.data.getUser.friendCount;
       profile.groupCount = response.data.getUser.groupCount;
       if (response.data.getUser.profilePicture) {
-        profile.profilePicture = 'https://greenvironment.net/' + response.data.getUser.profilePicture;
+        profile.profilePicture = environment.greenvironmentUrl + response.data.getUser.profilePicture;
       } else {
         profile.profilePicture = 'assets/images/account_circle-24px.svg';
       }
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 1bcd4f6..73d5691 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
-  graphQLUrl: '/graphql'
+  graphQLUrl: '/graphql',
+  greenvironmentUrl: '',
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 8ddcf48..062be1b 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  graphQLUrl: 'https://greenvironment.net/graphql'
+  graphQLUrl: 'https://greenvironment.net/graphql',
+  greenvironmentUrl: 'https://greenvironment.net/',
 };
 
 /*