diff --git a/frontend/src/scripts/index.js b/frontend/src/scripts/index.js
index 6155ba7..8e6c276 100644
--- a/frontend/src/scripts/index.js
+++ b/frontend/src/scripts/index.js
@@ -43,6 +43,13 @@ class Main extends Component {
     onHashChange(event){
         this.setState({page: window.location.hash})
     }
+    onViewChange(index){
+        let new_index = (this.state.currentImage - 1 + index) % this.state.photos.length
+        if (new_index < 0){
+            new_index += this.state.photos.length
+        }
+        this.setState({currentImage: new_index})
+    }
     onSubmit(event){
         event.preventDefault();
         let form = document.getElementById("form");
@@ -76,16 +83,22 @@ class Main extends Component {
                 width: photo.original_width,
                 height: photo.original_height,
             })
-            photos_carousel.push({
-                source: photo.original
-            })
-        };
+        }
+        if (this.state.photos.length > 3){
+            for(let i=this.state.currentImage - 1; i<=this.state.currentImage + 1; i++){
+                if(i < 0){
+                    i += this.state.photos.length;
+                }
+                photos_carousel.push({'source': this.state.photos[i].original})
+            }
+        }
+
         return (
 <div>
     <ModalGateway>
         {this.state.photoIsOpen &&
         <Modal onClose={this.togglePhoto}>
-            <Carousel views={photos_carousel} currentIndex={this.state.currentImage} />
+            <Carousel views={photos_carousel} currentIndex={1} trackProps={{onViewChange: (v) => this.onViewChange(v)}}/>
         </Modal>
         }
     </ModalGateway>
@@ -103,7 +116,7 @@ class Main extends Component {
     </nav>
     {this.state.page == "#gallery" &&
     <div class="container">
-        <Gallery photos={photos_gallery} onClick={this.openPhoto}/>
+        <Gallery photos={photos_gallery } onClick={this.openPhoto}/>
     </div>
     }
     {this.state.page == "" &&