diff --git a/frontend/app/gallery/directory/directory.gallery.component.html b/frontend/app/gallery/directory/directory.gallery.component.html
index 61154f09..9cb48a43 100644
--- a/frontend/app/gallery/directory/directory.gallery.component.html
+++ b/frontend/app/gallery/directory/directory.gallery.component.html
@@ -1,6 +1,3 @@
-<!--<a md-raised-button class="md-raised " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" aria-label="More">
-    <i md-icon>folder</i> {{directory.name}}
-</a>-->
 <a  class="button " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" >
   {{directory.name}}
 </a>
diff --git a/frontend/app/gallery/grid/grid.gallery.component.ts b/frontend/app/gallery/grid/grid.gallery.component.ts
index 78ba753f..6e3cb87e 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.ts
+++ b/frontend/app/gallery/grid/grid.gallery.component.ts
@@ -91,6 +91,17 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
         let containerWidth = this.getContainerWidth();
         this.renderedContainerWidth = containerWidth;
 
+        this.photos.sort((a:Photo, b:Photo) => {
+            if (a.metadata.creationDate > b.metadata.creationDate) {
+                return 1;
+            }
+            if (a.metadata.creationDate < b.metadata.creationDate) {
+                return -1;
+            }
+            // a must be equal to b
+            return 0;
+        });
+        
         this.photosToRender = [];
         let i = 0;
 
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
index b68aec9f..3dea54d9 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
@@ -31,6 +31,7 @@
     display: inline-block;
     padding: 15px;
     cursor: pointer;
+    font-size: x-large;
 }
 
 .navigation-arrow span {
@@ -44,7 +45,6 @@
     left: 0;
     position: fixed;;
     color: white;
-    font-size: x-large;
 }
 
 #rightArrow {
@@ -58,11 +58,12 @@
     text-align: right;
     width: 100%;
     padding: 5px;
+    font-size: large;
 }
 
 #controls span {
-    margin-left: 2px;
-    margin-right: 2px;
+    margin-left: 6px;
+    margin-right: 6px;
     color: white;
     cursor: pointer;
 }
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
index 2c09939a..f345c0f6 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
@@ -136,6 +136,10 @@ export class GalleryLightboxComponent {
     public hide() {
         console.log("hiding");
         let to = this.activePhoto.getDimension();
+        //iff target image out of screen -> scroll to there
+        if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
+            this.setBodyScrollTop(to.top);
+        }
         to.top -= this.getBodyScrollTop();
 
 
@@ -163,6 +167,7 @@ export class GalleryLightboxComponent {
         let fromImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
         let toImage = {width: to.width + "px", height: to.height + "px", top: "0px", left: "0px"};
 
+
         this.forceAnimateTo(fromImage,
             toImage,
             this.imgContainer.nativeElement.nativeElement);
@@ -220,6 +225,10 @@ export class GalleryLightboxComponent {
         return this.dom.getProperty(this.dom.query('body'), 'scrollTop');
     }
 
+    private setBodyScrollTop(value) {
+        return this.dom.setProperty(this.dom.query('body'), 'scrollTop', value);
+    }
+
     private getScreenWidth() {
         return window.innerWidth;
     }