diff --git a/src/component/telemachy.component.css b/src/component/telemachy.component.css
index 2acf5c6..3c0cd85 100755
--- a/src/component/telemachy.component.css
+++ b/src/component/telemachy.component.css
@@ -1,13 +1,12 @@
 .overlay {
 	position: absolute;
 	background: rgba(0, 0, 0, 0.5);
-	pointer-events: none;
 	z-index: 9000000;
 	transition: all 0.25s ease;
 }
 .explanation {
 	position: absolute;
-	min-width: 220px;
+	min-width: 400px;
 	z-index: 9000000;
 	transition: all 0.25s ease;
 	border-width: 1px;
@@ -45,12 +44,11 @@
 	height: calc(100% - 29px);
 }
 .popup .controls {
-	position: absolute;
 	bottom: 1em;
 }
 .controls a {
 	cursor: pointer;
-	font-size: 1.5em;
+	font-size: 1.2em;
 	font-weight: 100;
 	margin-left: 0.5em;
 	margin-right: 0.5em;
@@ -80,3 +78,40 @@
 .ytpopup .content {
 	padding: 1em;
 }
+
+.flex-container{
+	display: flex;
+}
+
+.step-button {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	flex-grow: 2;
+}
+
+.step-counter {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 2;
+	padding-right: 15%;
+}
+
+.end-button {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.horizontal-line {
+	margin-top: 20px;
+	height: 2px;
+	border: none;
+	color: #333;
+	background-color: #269189;
+	text-align: center;
+}
diff --git a/src/component/telemachy.component.html b/src/component/telemachy.component.html
index 90548cb..6f6ef43 100755
--- a/src/component/telemachy.component.html
+++ b/src/component/telemachy.component.html
@@ -5,12 +5,14 @@
 		<iframe width="853" height="480" [src]="getVideoUrl()" frameborder="0" allowfullscreen class="video"></iframe>
 		<div class="ytpopup">
 			<div class="content">
-				<div class="controls">
-					<a *ngIf="canGoBack()" (click)="previous()">&larr;</a>
-					<a *ngIf="!canFinish()" (click)="next()">&rarr;</a>
-					<a *ngIf="!canFinish()" (click)="skip()">skip</a>
-					<a *ngIf="canFinish()" (click)="finish()">finish</a>
-					<span>({{progress}}/{{total}})</span>
+				<div class="controls flex-container">
+					<div class="step-button">
+						<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
+						<a *ngIf="!canFinish()" (click)="next()">Next >></a>
+					</div>
+					<span class="step-counter">({{progress}}/{{total}})</span>
+					<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
+					<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
 				</div>
 			</div>
 		</div>
@@ -20,12 +22,15 @@
 		<div class="popup">
 			<div class="content">
 				<div [innerHtml]="asHtmlTourStep(step).body" class="body"></div>
-				<div class="controls">
-					<a *ngIf="canGoBack()" (click)="previous()">&larr;</a>
-					<a *ngIf="!canFinish()" (click)="next()">&rarr;</a>
-					<a *ngIf="!canFinish()" (click)="skip()">skip</a>
-					<a *ngIf="canFinish()" (click)="finish()">finish</a>
-					<span>({{progress}}/{{total}})</span>
+				<hr class="horizontal-line"/>
+				<div class="controls flex-container">
+					<div class="step-button">
+						<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
+						<a *ngIf="!canFinish()" (click)="next()">Next >></a>
+					</div>
+					<span class="step-counter">({{progress}}/{{total}})</span>
+					<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
+					<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
 				</div>
 			</div>
 		</div>
@@ -35,16 +40,18 @@
 		<div class="overlay" [ngStyle]="{left: 0, top: asElementTourStep(step).top, width: asElementTourStep(step).left, height: asElementTourStep(step).fromTop}"></div>
 		<div class="overlay" [ngStyle]="{left: asElementTourStep(step).left, top: asElementTourStep(step).bottom, width: asElementTourStep(step).fromLeft, height: asElementTourStep(step).toBottom}"></div>
 		<div class="overlay" [ngStyle]="{left: asElementTourStep(step).right, top: asElementTourStep(step).top, width: asElementTourStep(step).toRight, height: asElementTourStep(step).height}"></div>
-
-		<div class="explanation" [ngStyle]="{left: asElementTourStep(step).left, top: asElementTourStep(step).bottom, width: (asElementTourStep(step).domElement.getBoundingClientRect().width - 2) + 'px'}">
+		<div class="explanation" [ngStyle]="asElementTourStep(step).style">
 			<div class="content">
 				<div [innerHtml]="asElementTourStep(step).body"></div>
-				<div class="controls">
-					<a *ngIf="canGoBack()" (click)="previous()">&larr;</a>
-					<a *ngIf="!canFinish()" (click)="next()">&rarr;</a>
-					<a *ngIf="!canFinish()" (click)="skip()">skip</a>
-					<a *ngIf="canFinish()" (click)="finish()">finish</a>
-					<span>({{progress}}/{{total}})</span>
+				<hr class="horizontal-line"/>
+				<div class="controls flex-container">
+					<div class="step-button">
+						<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
+						<a *ngIf="!canFinish()" (click)="next()">Next >></a>
+					</div>
+					<span class="step-counter">({{progress}}/{{total}})</span>
+					<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
+					<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
 				</div>
 			</div>
 		</div>
diff --git a/src/step/element.step.ts b/src/step/element.step.ts
index c700a61..4b32a00 100755
--- a/src/step/element.step.ts
+++ b/src/step/element.step.ts
@@ -104,5 +104,18 @@ export class ElementTourStep extends TourStep {
 		}
 		return this.domElement.getBoundingClientRect().width + 'px';
 	}
+	get style(): object {
+		let styles: any = {
+			top: this.domElement.getBoundingClientRect().bottom + 'px',
+			width: (this.domElement.getBoundingClientRect().width - 2) + 'px'
+		};
+		if (this.domElement.getBoundingClientRect().left >= (document.body.scrollWidth / 2)) {
+			styles.right = (document.body.scrollWidth - this.domElement.getBoundingClientRect().right) + 'px';
+		}
+		if (this.domElement.getBoundingClientRect().left <= (document.body.scrollWidth / 2)) {
+			styles.left = this.domElement.getBoundingClientRect().left + 'px';
+		}
+		return styles;
+	}
 	//endregion
 }