diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java
index 604c650..75163c5 100644
--- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java
@@ -3,7 +3,7 @@ package org.gcube.portlets.widgets.imagepreviewerwidget.client;
 import com.github.gwtbootstrap.client.ui.Image;
 
 /**
- * This class contains the object to show within the carousel plus some other information:
+ * This class contains the image to show within the carousel plus the following other information:
  * <ul>
  * <li>title to show: a title to show in the header of the carousel;</li>
  * <li>tooltip : a tooltip shown on image hover event;</li>
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java
index 3345193..0c657e4 100644
--- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java
@@ -5,7 +5,10 @@ import java.util.List;
 
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel;
 
+import com.github.gwtbootstrap.client.ui.Button;
 import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.user.client.ui.RootPanel;
 
 /**
@@ -17,22 +20,38 @@ public class ImagePreviewer implements EntryPoint {
 	 */
 	public void onModuleLoad() {
 
-		//test();
+		// decomment for testing purpose
+		test();
 
 	}
 
-	@SuppressWarnings("unused")
 	private void test(){
 
 		// random images for test
 		List<EnhancedImage> images = new ArrayList<>();
+		images.add(new EnhancedImage("http://kreativportfolio.com/wp-content/uploads/2015/12/google-art-project-jacob-van-ruisdael--rough-sea-at-a-jetty--google-art-project.jpg"));
 		images.add(new EnhancedImage("https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg"));
+		images.add(new EnhancedImage("http://www.symphony-solutions.eu/wp-content/uploads/2014/09/GDG-DevFest-Ukraine-Banner.jpg"));
 		images.add(new EnhancedImage("http://images6.alphacoders.com/316/316963.jpg"));
 		images.add(new EnhancedImage("http://nerdist.com/wp-content/uploads/2014/07/ned-stark-970x545.jpg"));
 		images.add(new EnhancedImage("http://vignette2.wikia.nocookie.net/gameofthrones/images/2/25/Eddard's_Head.png/revision/latest?cb=20121205211321"));
 		images.add(new EnhancedImage("https://upload.wikimedia.org/wikipedia/it/1/17/Il_grande_Lebowski.jpg"));
-		Carousel c = new Carousel();
+		
+		
+		final Carousel c = new Carousel();
 		c.updateImages(images);
-		RootPanel.get("image-previewer-div").add(c);
+		
+		// button to show the carousel
+		Button b = new Button(new ClickHandler() {
+			
+			@Override
+			public void onClick(ClickEvent event) {
+				c.show();
+				
+			}
+		});
+		b.setText("Show images");
+		
+		RootPanel.get("image-previewer-div").add(b);
 	}
 }
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Loading.gif b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Loading.gif
new file mode 100644
index 0000000..4c4d825
Binary files /dev/null and b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Loading.gif differ
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java
new file mode 100644
index 0000000..b1eb152
--- /dev/null
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java
@@ -0,0 +1,10 @@
+package org.gcube.portlets.widgets.imagepreviewerwidget.client.resources;
+
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.ImageResource;
+
+public interface Resources extends ClientBundle {
+	
+	@Source("Loading.gif")
+	ImageResource loadingImage();
+}
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java
index 8b11cce..ddddf26 100644
--- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java
@@ -3,17 +3,25 @@ package org.gcube.portlets.widgets.imagepreviewerwidget.client.ui;
 import java.util.List;
 
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.EnhancedImage;
+import org.gcube.portlets.widgets.imagepreviewerwidget.client.resources.Resources;
 
 import com.github.gwtbootstrap.client.ui.Button;
 import com.github.gwtbootstrap.client.ui.Image;
 import com.github.gwtbootstrap.client.ui.Modal;
+import com.github.gwtbootstrap.client.ui.constants.IconSize;
+import com.github.gwtbootstrap.client.ui.constants.IconType;
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Style.Cursor;
 import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.LoadEvent;
+import com.google.gwt.event.dom.client.LoadHandler;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -33,9 +41,6 @@ public class Carousel extends Composite{
 	@UiField
 	Modal mainModalPanel;
 
-	@UiField
-	Button showButton;
-
 	@UiField
 	Button prevButton;
 
@@ -51,55 +56,78 @@ public class Carousel extends Composite{
 	@UiField
 	Image shownImage;
 
+	@UiField
+	Image loadingImage;
+
 	@UiField
 	HorizontalPanel horizontaFooterPanel;
 
+	// list of enhanced images to show
 	private List<EnhancedImage> listOfAttachmentsToShow;
 
+	// show the image at currentPreviewPosition
 	private int currentPreviewPosition;
 
+	// other resources
+	private Resources resources = GWT.create(Resources.class);
+
 	/**
-	 * Build a carousel that shows imagesToShow images.
+	 * Build a carousel to show EnhancedImages.
 	 * @param imagesToShow
 	 */
 	public Carousel() {
 
 		initWidget(uiBinder.createAndBindUi(this));
 
-		// hide show button (not needed when the widget is used...it was used while creating the widget)
-		showButton.setVisible(false);
-
 		// set alignment of the horizontal panel's children
 		horizontaFooterPanel.setCellHorizontalAlignment(closeButton, HorizontalPanel.ALIGN_CENTER);
 		horizontaFooterPanel.setCellHorizontalAlignment(downloadButton, HorizontalPanel.ALIGN_CENTER);
 		horizontaFooterPanel.setCellHorizontalAlignment(prevButton, HorizontalPanel.ALIGN_LEFT);
 		horizontaFooterPanel.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
 
-		// set central buttons' cell widths to be equal
-		horizontaFooterPanel.setCellWidth(downloadButton, "200px");
-		horizontaFooterPanel.setCellWidth(closeButton, "200px");
+		// set central buttons' cell widths to be equal TODO
+		//horizontaFooterPanel.setCellWidth(downloadButton, "200px");
+		//horizontaFooterPanel.setCellWidth(closeButton, "200px");
 
 		// set vertical alignment
-		horizontaFooterPanel.setCellVerticalAlignment((Widget)nextButton, VerticalPanel.ALIGN_MIDDLE);
+		horizontaFooterPanel.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
 		horizontaFooterPanel.setCellVerticalAlignment(prevButton,  VerticalPanel.ALIGN_MIDDLE);
 
-		// prev button
-		prevButton.setText("<<");
+		// set icons
+		downloadButton.setIcon(IconType.DOWNLOAD);
+		closeButton.setIcon(IconType.COLLAPSE);
+		prevButton.setIcon(IconType.CHEVRON_LEFT);
+		nextButton.setIcon(IconType.CHEVRON_RIGHT);
 
-		// next button
-		nextButton.setText(">>");
+		// set icons'size
+		prevButton.setIconSize(IconSize.LARGE);
+		nextButton.setIconSize(IconSize.LARGE);
 
-	}
+		// TODO hide close button (for now)
+		closeButton.setVisible(false);
 
-	@UiHandler("showButton")
-	public void onClick(ClickEvent e){
+		//on user click on the image, go on
+		shownImage.addClickHandler(new ClickHandler() {
 
-		mainModalPanel.show();
+			@Override
+			public void onClick(ClickEvent event) {
+
+				if(nextButton.isVisible())
+					nextButton.click();
+
+			}
+		});
+
+		// set url of the loading image
+		loadingImage.setResource(resources.loadingImage());
+		
+		// set shownimage mouse icon to pointer
+		shownImage.getElement().getStyle().setCursor(Cursor.POINTER); 
 
 	}
 
 	@UiHandler("closeButton")
-	public void closeOnClick(ClickEvent e){
+	public void hideOnClick(ClickEvent e){
 
 		mainModalPanel.hide();
 
@@ -108,43 +136,34 @@ public class Carousel extends Composite{
 	@UiHandler("downloadButton")
 	public void downloadOnClick(ClickEvent e){
 
-		mainModalPanel.hide();
-		Window.open(listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl(), "_blank", "");
+		String downloadUrl = listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl();
+		if( downloadUrl != null){
+			mainModalPanel.hide();
+			Window.open(downloadUrl, "_blank", "");
+		}
 
 	}
 
 	@UiHandler("prevButton")
 	public void onClickPrev(ClickEvent e){
 
-		int prevPreviewPosition = currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
-		currentPreviewPosition = prevPreviewPosition;
+		// evaluate prev index
+		currentPreviewPosition = currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
 
-		// show it
-		shownImage.setUrl(listOfAttachmentsToShow.get(currentPreviewPosition).getImageUrl());
-
-		// change image tooltip
-		shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
-
-		// change the title to the modal
-		mainModalPanel.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
+		// show the image
+		showImage(currentPreviewPosition);
 
 	}
 
 	@UiHandler("nextButton")
 	public void onClickNext(ClickEvent e){
 
-		int nextPreviewPosition = currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 
+		// evaluate next index
+		currentPreviewPosition= currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 
 				0 : currentPreviewPosition + 1;
-		currentPreviewPosition = nextPreviewPosition;
 
-		// show it
-		shownImage.setUrl(listOfAttachmentsToShow.get(currentPreviewPosition).getImageUrl());
-
-		// change image tooltip
-		shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
-
-		// change the title to the modal
-		mainModalPanel.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
+		// show the image
+		showImage(currentPreviewPosition);
 
 	}
 
@@ -153,19 +172,13 @@ public class Carousel extends Composite{
 	 */
 	public void show(){
 
+		mainModalPanel.show();
+
 		// take the first object
 		currentPreviewPosition = 0;
 
-		// show it
-		shownImage.setUrl(listOfAttachmentsToShow.get(currentPreviewPosition).getImageUrl());
-
-		// change image tooltip
-		shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
-
-		// change the title to the modal
-		mainModalPanel.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
-
-		mainModalPanel.show();
+		// show the image
+		showImage(currentPreviewPosition);
 	}
 
 	/**
@@ -175,25 +188,25 @@ public class Carousel extends Composite{
 
 		// evaluate where this image is
 		int index = evaluateImagePosition(image);
-		
+
 		if(index == -1)
 			return;
 
 		// take the first object
 		currentPreviewPosition = index;
 
-		// show it
-		shownImage.setUrl(listOfAttachmentsToShow.get(currentPreviewPosition).getImageUrl());
-
-		// change image tooltip
-		shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
-
-		// change the title to the modal
-		mainModalPanel.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
+		// show the image
+		showImage(currentPreviewPosition);
 
+		// show the panel
 		mainModalPanel.show();
 	}
 
+	/**
+	 * Retrieve the index of such image
+	 * @param image
+	 * @return
+	 */
 	private int evaluateImagePosition(EnhancedImage image) {
 
 		for(int index = 0; index < listOfAttachmentsToShow.size(); index++){
@@ -217,4 +230,55 @@ public class Carousel extends Composite{
 
 	}
 
+	/**
+	 * Hide Previouse and Next arrows of the carousel.
+	 */
+	public void hideArrows(){
+
+		nextButton.setVisible(false);
+		prevButton.setVisible(false);
+
+	}
+
+	/**
+	 * Show image function
+	 * @param index the index of the image to show
+	 */
+	private void showImage(int index){
+
+		// show loading image and hide the shown one
+		loadingImage.setVisible(true);
+		shownImage.setVisible(false);
+
+		// when image is download ...
+		shownImage.addLoadHandler(new LoadHandler() {
+
+			@Override
+			public void onLoad(LoadEvent event) {
+
+				// swap
+				shownImage.setVisible(true);
+				loadingImage.setVisible(false);
+
+			}
+		});
+
+		// fetch the image from the url
+		shownImage.setUrl(listOfAttachmentsToShow.get(currentPreviewPosition).getImageUrl());
+
+		// change image tooltip
+		shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
+
+		// change the title to the modal
+		String shownTitle = listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().length() > 50 ?
+				listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().substring(0, 50) + "..." :
+					listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow();
+		HTML title = new HTML(shownTitle);
+		title.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
+		
+		mainModalPanel.setTitle(title.getHTML());
+		
+		
+	}
+
 }
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml
index c2e0108..fc1031e 100644
--- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml
@@ -2,23 +2,25 @@
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
 	xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
 	<ui:style>
+	
 	.image {
 		width: 100%;
 	}
 	
-	.left-align {
-		color: #3B5998;
-		font-weight: bold;
+	.image-loading {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 30%;
+		margin-bottom: 30%;
 	}
 	
-	.right-align {
+	.arrow {
 		color: #3B5998;
-		font-weight: bold;
 	}
 	
 	@external .modal-header;
 	.modal-header {
-		text-align: center;
 		font-family: "Helvetica Neue", Arial, sans-serif;
 		height: 20px;
 	}
@@ -28,7 +30,7 @@
 		position: relative;
 		max-height: 400px;
 		padding: 0;
-		overflow-y: auto;
+		overflow-y: hidden;
 	}
 	
 	@external .modal-footer;
@@ -48,17 +50,18 @@
 	}
 	</ui:style>
 	<g:HTMLPanel>
-		<b:Button ui:field="showButton">Show the carousel!</b:Button>
 		<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
-			closeVisible="false" animation="true" dynamicSafe="true">
+			closeVisible="true" animation="true" dynamicSafe="true">
+			<b:Image styleName="{style.image-loading}" ui:field="loadingImage"></b:Image>
 			<b:Image styleName="{style.image}" ui:field="shownImage"></b:Image>
 			<b:ModalFooter>
-				<g:HorizontalPanel styleName="{style.style-horizontal-panel}" ui:field="horizontaFooterPanel">
+				<g:HorizontalPanel styleName="{style.style-horizontal-panel}"
+					ui:field="horizontaFooterPanel">
 					<b:Button title="Previous" ui:field="prevButton"
-						styleName="{style.left-align}"></b:Button>
+						styleName="{style.arrow}"></b:Button>
 					<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
 					<b:Button title="Close" ui:field="closeButton">Close</b:Button>
-					<b:Button title="Next" ui:field="nextButton" styleName="{style.right-align}"></b:Button>
+					<b:Button title="Next" ui:field="nextButton" styleName="{style.arrow}"></b:Button>
 				</g:HorizontalPanel>
 			</b:ModalFooter>
 		</b:Modal>