diff --git a/Client/package-lock.json b/Client/package-lock.json
index 655195e..abaf57a 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -6691,6 +6691,11 @@
       "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-3.1.4.tgz",
       "integrity": "sha512-dHMX6Yv0ahwvjvMFo2wQ2Mbe4vcUTEcao0jmVKenchmaZjDGWsJ2xvRgEDKgAA9bNR0RI5gqQNzICmSf2MC1DA=="
     },
+    "ngx-gallery": {
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/ngx-gallery/-/ngx-gallery-5.9.1.tgz",
+      "integrity": "sha512-T9nPI+8TwQ5huQvPnptp0FwXJrLcAIjmtenOHZulFMkKfai3LBt3zhWRazoL706ywhs+JKIvOY+4lzpBOQ0n3g=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/Client/package.json b/Client/package.json
index a45f750..46de435 100644
--- a/Client/package.json
+++ b/Client/package.json
@@ -27,6 +27,7 @@
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
     "ngx-bootstrap": "^3.1.4",
+    "ngx-gallery": "^5.9.1",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },
diff --git a/Client/src/app/app.module.ts b/Client/src/app/app.module.ts
index 6abcb75..e52a074 100644
--- a/Client/src/app/app.module.ts
+++ b/Client/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { JwtModule } from '@auth0/angular-jwt';
+import { NgxGalleryModule } from 'ngx-gallery';
 
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
@@ -44,6 +45,7 @@ export function tokenGetter() {
     BrowserModule,
     HttpClientModule,
     FormsModule,
+    NgxGalleryModule,
     JwtModule.forRoot({
       config: {
         tokenGetter: tokenGetter,
diff --git a/Client/src/app/components/members/member-detail/member-detail.component.html b/Client/src/app/components/members/member-detail/member-detail.component.html
index 128e1a8..342e489 100644
--- a/Client/src/app/components/members/member-detail/member-detail.component.html
+++ b/Client/src/app/components/members/member-detail/member-detail.component.html
@@ -43,7 +43,7 @@ <h4>Interests</h4>
             <p>{{user.interests}}</p>
           </tab>
           <tab heading="Photos">
-            <p>Photos here</p>
+            <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
           </tab>
           <tab heading="Messages">
 
diff --git a/Client/src/app/components/members/member-detail/member-detail.component.ts b/Client/src/app/components/members/member-detail/member-detail.component.ts
index 03ee666..6a24f6b 100644
--- a/Client/src/app/components/members/member-detail/member-detail.component.ts
+++ b/Client/src/app/components/members/member-detail/member-detail.component.ts
@@ -3,6 +3,7 @@ import { User } from 'src/app/models/user';
 import { UserService } from 'src/app/services/user.service';
 import { AlertifyService } from 'src/app/services/alertify.service';
 import { ActivatedRoute } from '@angular/router';
+import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
 
 @Component({
   selector: 'app-member-detail',
@@ -11,6 +12,8 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class MemberDetailComponent implements OnInit {
   user: User;
+  galleryOptions: NgxGalleryOptions[];
+  galleryImages: NgxGalleryImage[];
 
   constructor(
     private userService: UserService,
@@ -21,5 +24,32 @@ export class MemberDetailComponent implements OnInit {
     this.route.data.subscribe(data => {
       this.user = data['user'];
     });
+
+    this.galleryOptions = [
+      {
+        width: '500px',
+        height: '500px',
+        imagePercent: 100,
+        thumbnailsColumns: 4,
+        imageAnimation: NgxGalleryAnimation.Slide,
+        preview: false
+      }
+    ];
+
+    this.galleryImages = this.getImages();
+  }
+
+  getImages() {
+    const imageUrls = [];
+    for (let i = 0; i < this.user.photos.length; i++) {
+      imageUrls.push({
+        small: this.user.photos[i].url,
+        medium: this.user.photos[i].url,
+        big: this.user.photos[i].url,
+        description: this.user.photos[i].description
+      });
+    }
+
+    return imageUrls;
   }
 }