diff --git a/frontend/app/frame/frame.component.html b/frontend/app/frame/frame.component.html
index 0fe99dab..26cb95a4 100644
--- a/frontend/app/frame/frame.component.html
+++ b/frontend/app/frame/frame.component.html
@@ -29,7 +29,7 @@
 
             <ng-content></ng-content>
         </div>-->
-        <div>
+    <md-content felx>
         <nav class="navbar navbar-inverse navbar-static-top">
             <div class="container">
                 <div class="navbar-header">
@@ -43,9 +43,7 @@
                 </div>
                 <div id="navbar" class="collapse navbar-collapse">
                     <ul class="nav navbar-nav">
-                        <li class="active"><a href="#">Home</a></li>
-                        <li><a href="#about">About</a></li>
-                        <li><a href="#contact">Contact</a></li>
+                        <li class="active"><a href="#">Gallery</a></li>
                     </ul>
                 </div><!--/.nav-collapse -->
             </div>
@@ -57,5 +55,5 @@
             <ng-content></ng-content>
 
         </div><!-- /.container -->
-        </div>
+        </md-content >
 </md-sidenav-container>
\ No newline at end of file
diff --git a/frontend/app/gallery/grid/grid.gallery.component.ts b/frontend/app/gallery/grid/grid.gallery.component.ts
index cfd0b945..cd77cd80 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.ts
+++ b/frontend/app/gallery/grid/grid.gallery.component.ts
@@ -41,8 +41,11 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit{
     
     ngAfterViewInit(){ 
         this.lightbox.gridPhotoQL = this.gridPhotoQL;
-        this.gridPhotoQL.changes.subscribe(
+       this.gridPhotoQL.changes.subscribe(
             (x)=> {
+                if(this.gridPhotoQL.length < this.photosToRender.length){
+                    return;
+                }
                 if(this.renderedConteinerWidth != this.getContainerWidth()){
                     this.renderPhotos();
                 }
@@ -62,7 +65,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit{
 
          while (i < this.directory.photos.length ) {
 
-             let photoRowBuilder = new GridRowBuilder(this.directory.photos,i,this.IMAGE_MARGIN,containerWidth);
+             let photoRowBuilder = new GridRowBuilder(this.directory.photos,i,this.IMAGE_MARGIN,this.getContainerWidth());
              photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
              photoRowBuilder.adjustRowHeightBetween(minRowHeight,maxRowHeight);
 
@@ -86,6 +89,8 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit{
         if(!this.gridContainer){
             return 0;
         }
+        console.log(this.gridContainer);
+        console.log(this.gridContainer.nativeElement.clientWidth);
         return this.gridContainer.nativeElement.clientWidth;
     }
 
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
index 385a7c0e..90f1f200 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
@@ -21,3 +21,12 @@
     height: 100%; /* Full height */
     background-color: black;
 }
+img {
+    width: 100%;
+    height: 100%;
+}
+.imgContainer{
+    justify-content: center; /* add to align horizontal */
+    align-items: center; /* add to align vertical */
+
+}
\ No newline at end of file
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
index 8f170195..6b5fb033 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
@@ -1,4 +1,5 @@
 <div
+        [hidden]="!activePhoto"
         (click)="hide()">
     <div class="blackCanvas"
          #blackCanvas>
@@ -6,6 +7,9 @@
     </div>
     <div class="lightbox"
          #lightbox>
-        <img [src]="getThumbnailPath()" [style.width]="photoStyle.width" [style.height]="photoStyle.height"/>
-    </div>
-</div>
+         <div   class="imgContainer">
+            <img #thImage [src]="getThumbnailPath()" />
+            <img #image [src]="getPhotoPath()" style="position:absolute;"/>
+          </div>
+     </div>
+ </div>
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
index 852f0937..f4ee21dd 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
@@ -1,47 +1,39 @@
 ///<reference path="../../../browser.d.ts"/>
 
-import {Component, Input, ElementRef, ViewChild, QueryList} from 'angular2/core';
+import {Component, ElementRef, ViewChild, QueryList} from "angular2/core";
 import {Photo} from "../../../../common/entities/Photo";
-import {Directory} from "../../../../common/entities/Directory";
-import {Utils} from "../../../../common/Utils";
-import {IRenderable, Dimension} from "../../model/IRenderable";
 import {GalleryPhotoComponent} from "../photo/photo.gallery.component";
-import {AnimationBuilder, CssAnimationBuilder} from "angular2/animate";
+import {AnimationBuilder} from "angular2/animate";
 import {BrowserDomAdapter} from "angular2/src/platform/browser/browser_adapter";
+import {Dimension} from "../../model/IRenderable";
 
 @Component({
     selector: 'gallery-lightbox',
     styleUrls: ['app/gallery/lightbox/lightbox.gallery.component.css'],
     templateUrl: 'app/gallery/lightbox/lightbox.gallery.component.html'
 })
-export class GalleryLightboxComponent{
+export class GalleryLightboxComponent {
 
     @ViewChild('lightbox') lightBoxDiv:ElementRef;
     @ViewChild('blackCanvas') blackCanvasDiv:ElementRef;
+    @ViewChild('thImage') thIMageImg:ElementRef;
+    @ViewChild('image') imageImg:ElementRef;
 
-    private activePhoto:GalleryPhotoComponent  = null;
+    private activePhoto:GalleryPhotoComponent = null;
     public gridPhotoQL:QueryList<GalleryPhotoComponent>;
 
     private dom:BrowserDomAdapter;
-    private photoStyle = {width:"100%",height:"100%"};
-    
-    
-    constructor(private animBuilder: AnimationBuilder) {
+
+
+    constructor(private animBuilder:AnimationBuilder) {
         this.dom = new BrowserDomAdapter();
 
- 
+
     }
 
-    public show(photo:Photo){
-        let galleryPhotoComponents = this.gridPhotoQL.toArray();
-        let selectedPhoto:GalleryPhotoComponent = null;
-        for(let i= 0; i < galleryPhotoComponents.length; i++){
-            if(galleryPhotoComponents[i].photo == photo){
-                selectedPhoto = galleryPhotoComponents[i];
-                break;
-            }
-        }
-        if(selectedPhoto === null){
+    public show(photo:Photo) {
+        let selectedPhoto = this.findPhotoComponenet(photo);
+        if (selectedPhoto === null) {
             throw new Error("Can't find Photo");
         }
 
@@ -53,37 +45,27 @@ export class GalleryLightboxComponent{
         from.top -= this.getBodyScrollTop();
 
 
-        if(from.height > from.width){
-            this.photoStyle.height = "100%";
-            this.photoStyle.width = "auto";
-        }else{
-            this.photoStyle.height = "auto";
-            this.photoStyle.width = "100%";
-        }
-        
-        let anim0 = this.animBuilder.css();
-        anim0.setDuration(0);
-        anim0.setToStyles(from.toStyle());
-        anim0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
 
-            let anim1 = this.animBuilder.css();
-            anim1.setDuration(800);
-            anim1.setFromStyles(from.toStyle());
-            anim1.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
-            anim1.start(this.lightBoxDiv.nativeElement);
-        });
+        let fromImage = {width: from.width + "px", height: from.height + "px", top: "0px", left:"0px"};
+        let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.photo).toStyle();
 
-        let anim2 = this.animBuilder.css();
-        anim2.setDuration(0);
-        anim2.setToStyles({opacity:"0", display:"block"});
-        anim2.start(this.blackCanvasDiv.nativeElement).onComplete(()=>{
+        this.forceAnimateFrom(fromImage,
+            toImage,
+            this.thIMageImg.nativeElement);
+
+        this.forceAnimateFrom(fromImage,
+            toImage,
+            this.imageImg.nativeElement);
+
+        this.forceAnimateFrom(from.toStyle(),
+            {height: "100%", width: "100%", "top": "0px", "left": "0px"},
+            this.lightBoxDiv.nativeElement);
+
+
+        this.forceAnimateFrom({opacity: "0", display: "block"},
+            {opacity: "1"},
+            this.blackCanvasDiv.nativeElement);
 
-            let anim3 = this.animBuilder.css();
-            anim3.setDuration(800);
-            anim3.setFromStyles({opacity:"0"});
-            anim3.setToStyles({opacity:"1"});
-            anim3.start(this.blackCanvasDiv.nativeElement);
-        });
     }
 
     public hide() {
@@ -91,49 +73,121 @@ export class GalleryLightboxComponent{
         let to = this.activePhoto.getDimension();
         to.top -= this.getBodyScrollTop();
 
+
+        this.forceAnimateTo({height: "100%", width: "100%", "top": "0px", "left": "0px"},
+            to.toStyle(),
+            this.lightBoxDiv.nativeElement,
+            {height: "0px", width: "0px", "top": "0px", "left": "0px"},
+            ()=> {
+                this.activePhoto = null;
+            });
+
+        this.dom.setStyle(this.dom.query('body'), 'overflow', 'auto');
+
+        this.forceAnimateTo({opacity: "1.0", display: "block"},
+            {opacity: "0.0", display: "block"},
+            this.blackCanvasDiv.nativeElement,
+            {display: "none"});
+
+
+        let fromImage = this.calcLightBoxPhotoDimension(this.activePhoto.photo).toStyle();
+        let toImage = {width: to.width + "px", height: to.height + "px", top: "0px", left:"0px"};
+
+        this.forceAnimateTo(fromImage,
+            toImage,
+            this.thIMageImg.nativeElement);
+
+        this.forceAnimateTo(fromImage,
+            toImage,
+            this.imageImg.nativeElement);
+
+    }
+
+    private findPhotoComponenet(photo){
+        let galleryPhotoComponents = this.gridPhotoQL.toArray();
+        let selectedPhoto:GalleryPhotoComponent = null;
+        for (let i = 0; i < galleryPhotoComponents.length; i++) {
+            if (galleryPhotoComponents[i].photo == photo) {
+                selectedPhoto = galleryPhotoComponents[i];
+                break;
+            }
+        }
+        return selectedPhoto;
+    }
+
+    private forceAnimateFrom(from, to, elemnet) {
         let anim0 = this.animBuilder.css();
-        anim0.setDuration(800);
-        anim0.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
-        anim0.setToStyles(to.toStyle());
-        anim0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
+        anim0.setDuration(0);
+        anim0.setToStyles(from);
+        anim0.start(elemnet).onComplete(()=> {
+
+            let anim1 = this.animBuilder.css();
+            anim1.setDuration(500);
+            anim1.setFromStyles(from);
+            anim1.setToStyles(to);
+            anim1.start(elemnet);
+        });
+    }
+
+    private forceAnimateTo(from, to, elemnet, innerTo = null, onComplete = ()=> {
+    }) {
+        if (innerTo == null) {
+            innerTo = to;
+        }
+
+        let anim0 = this.animBuilder.css();
+        anim0.setDuration(500);
+        anim0.setFromStyles(from);
+        anim0.setToStyles(to);
+        anim0.start(elemnet).onComplete(()=> {
             let anim1 = this.animBuilder.css();
             anim1.setDuration(0);
-            anim1.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
-            anim1.start(this.lightBoxDiv.nativeElement);
-            this.dom.setStyle(this.dom.query('body'), 'overflow', 'auto');
-        });
-
-
-        let anim2 = this.animBuilder.css();
-        anim2.setDuration(800);
-        anim2.setFromStyles({opacity:"1"});
-        anim2.setToStyles({opacity:"0"});
-        anim2.start(this.blackCanvasDiv.nativeElement).onComplete(()=>{
-            let anim4 = this.animBuilder.css();
-            anim4.setDuration(0);
-            anim4.setToStyles({opacity:"0", display:"none"});
-            anim4.start(this.blackCanvasDiv.nativeElement);
+            anim1.setToStyles(innerTo);
+            anim1.start(elemnet).onComplete(onComplete);
         });
     }
 
-
-    getPhotoPath(){
-        if(!this.activePhoto){
+    getPhotoPath() {
+        if (!this.activePhoto) {
             return "";
         }
-        return Photo.getPhotoPath(this.activePhoto.directory,this.activePhoto.photo); 
+        return Photo.getPhotoPath(this.activePhoto.directory, this.activePhoto.photo);
     }
 
-    getThumbnailPath(){
-        if(!this.activePhoto){
+    getThumbnailPath() {
+        if (!this.activePhoto) {
             return "";
         }
-        return Photo.getThumbnailPath(this.activePhoto.directory,this.activePhoto.photo);
+        return Photo.getThumbnailPath(this.activePhoto.directory, this.activePhoto.photo);
     }
-    
-    private getBodyScrollTop(){
-        return this.dom.getProperty(this.dom.query('body'),'scrollTop');
+
+    private getBodyScrollTop() {
+        return this.dom.getProperty(this.dom.query('body'), 'scrollTop');
+    }
+
+    private getScreenWidth() {
+        return window.innerWidth;
+    }
+
+    private getScreenHeight() {
+        return window.innerHeight;
+    }
+
+ 
+    private calcLightBoxPhotoDimension(photo:Photo):Dimension{
+        let width = 0;
+        let height = 0;
+        if (photo.height > photo.width) {
+            width= Math.round(photo.width * (this.getScreenHeight() / photo.height));
+            height= this.getScreenHeight();
+        } else {
+            width= this.getScreenWidth();
+            height= Math.round(photo.height * (this.getScreenWidth() / photo.width));
+        }
+        let top = (this.getScreenHeight() / 2 - height / 2);
+        let left = (this.getScreenWidth() / 2 - width / 2);
+
+        return new Dimension(top,left,width,height);
     }
-    
 }
 
diff --git a/frontend/app/gallery/photo/photo.gallery.component.ts b/frontend/app/gallery/photo/photo.gallery.component.ts
index 6fde50aa..9dd06a8e 100644
--- a/frontend/app/gallery/photo/photo.gallery.component.ts
+++ b/frontend/app/gallery/photo/photo.gallery.component.ts
@@ -24,9 +24,7 @@ export class GalleryPhotoComponent implements IRenderable{
     }
 
  
-    public getDimension():Dimension{
-        console.log(this.imageRef);
-        console.log(this.imageRef.nativeElement);
+    public getDimension():Dimension{ 
         return new Dimension(this.imageRef.nativeElement.offsetTop,
                            this.imageRef.nativeElement.offsetLeft,
                            this.imageRef.nativeElement.width,
diff --git a/frontend/index.ejs b/frontend/index.ejs
index 94db875b..1c7151a7 100644
--- a/frontend/index.ejs
+++ b/frontend/index.ejs
@@ -9,7 +9,7 @@
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
 
-<body>
+<body >
 <pi-gallery2-app>Loading...</pi-gallery2-app>
 </body>
 <script>