diff --git a/less/header.less b/less/header.less
index b3c4d81..0cd3d26 100644
--- a/less/header.less
+++ b/less/header.less
@@ -179,68 +179,6 @@
 		}
 	}
 
-	.pagination-block {
-		margin-right: 10px !important;
-		margin-left: 10px !important;
-		transition: opacity 250ms ease-in;
-		opacity: 0;
-		pointer-events: none;
-
-		&.ready {
-			opacity: 1;
-			pointer-events: inherit;
-		}
-
-		a {
-			display: inline-block;
-			padding-left: 2px;
-			padding-right: 2px;
-		}
-
-		.progress-container {
-			height: 2px;
-			position: absolute;
-			bottom: 8px;
-			left: 8px;
-			background: #666;
-			width: 90%;
-			margin: auto;
-
-			.progress-bar {
-				background-color: @gray-lighter;
-				height: 2px;
-			}
-		}
-
-		.dropdown-toggle {
-			display: inline-block;
-			padding-left: 5px;
-			padding-right: 5px;
-			padding-top: 0px;
-			padding-bottom: 0px;
-		}
-
-		.open>a {
-			background-color: rgba(0, 0, 0, 0)!important;
-		}
-
-
-		.dropdown-menu {
-			padding: 10px;
-		}
-
-		@media (max-width: @screen-xs-max) {
-			.progress-container {
-				display: inline-block;
-				position: static;
-				bottom: 0px;
-				margin-left: 1em;
-				width: 100px;
-				margin-bottom: 3px;
-			}
-		}
-	}
-
 	.notif-dropdown-link {
 		// margin-top: 1em;
 		border-top: 1px solid rgba(163, 163, 163, 0.5);
diff --git a/less/topic.less b/less/topic.less
index fa00593..a31e454 100644
--- a/less/topic.less
+++ b/less/topic.less
@@ -511,33 +511,64 @@
 		}
 	}
 
-	.navigator-thumb {
-		position: fixed;
-		background-color: @gray-lighter;
-		bottom: 60px;
-		left: 0px;
-		padding: 10px;
-		border-radius: 5px;
-		white-space: nowrap;
-		z-index: 100;
-	}
-
 	.pagination-block {
 		position: fixed;
-		width: 100%;
 		background-color: @gray-lighter;
 		bottom: 0px;
-		left: 0px;
+		right: 0px;
 		z-index: 100;
 		transition: opacity 250ms ease-in;
 		opacity: 0;
 
+		.pagination-text {
+			color: @text-color;
+		}
+
 		&.ready {
 			opacity: 1;
 		}
 
 		.wrapper {
 			padding: 5px 0px 5px 0px;
+			.dropdown-toggle {
+				padding-left:20px;
+				padding-right: 20px;
+			}
+			.dropdown-menu {
+				width: 400px;
+
+				li {
+					padding: 10px;
+				}
+				.post-content {
+					height: 350px;
+					overflow: hidden;
+				}
+				.scroller-bg {
+					width: 3px;
+					height: 300px;
+					margin-left: 3px;
+					background-color: @gray-lighter;
+					.scroller-thumb {
+						width: 9px;
+						height: 20px;
+						background-color: @brand-primary;
+						position: relative;
+						left: -3px;
+						cursor: pointer;
+						border-radius: 3px;
+						.thumb-text {
+							font-weight: bolder;
+							margin-left: 20px;
+						}
+					}
+				}
+			}
+			@media (max-width: @screen-sm-min) {
+				.dropdown-menu {
+					width: 100%;
+				}
+			}
 		}
 		.progress-bar {
 			background-color: @brand-info;
@@ -547,6 +578,11 @@
 			transition: width 50ms ease-in;
 		}
 	}
+	@media (max-width: @screen-sm-min) {
+		.pagination-block {
+			width: 100%;
+		}
+	}
 }
 
 .thread_active_users {
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
index 4967d16..aed6535 100644
--- a/templates/partials/menu.tpl
+++ b/templates/partials/menu.tpl
@@ -199,30 +199,6 @@
 					</li>
 				</ul>
 
-				<ul class="nav navbar-nav navbar-right pagination-block visible-lg visible-md">
-					<li class="dropdown">
-						<a><i class="fa fa-angle-double-up pointer fa-fw pagetop"></i></a>
-						<a><i class="fa fa-angle-up pointer fa-fw pageup"></i></a>
-
-						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
-							<span class="pagination-text"></span>
-						</a>
-
-						<a><i class="fa fa-angle-down pointer fa-fw pagedown"></i></a>
-						<a><i class="fa fa-angle-double-down pointer fa-fw pagebottom"></i></a>
-
-						<div class="progress-container">
-							<div class="progress-bar"></div>
-						</div>
-
-						<ul class="dropdown-menu" role="menu">
-							<li>
-  								<input type="text" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
-  							</li>
-						</ul>
-					</li>
-				</ul>
-
 				<ul id="main-nav" class="nav navbar-nav">
 					{{{each navigation}}}
 					<!-- IF function.displayMenuItem, @index -->
diff --git a/templates/partials/topic/navigation-post.tpl b/templates/partials/topic/navigation-post.tpl
new file mode 100644
index 0000000..acbdc75
--- /dev/null
+++ b/templates/partials/topic/navigation-post.tpl
@@ -0,0 +1,12 @@
+<div class="clearfix">
+    <div class="icon pull-left">
+		<a href="<!-- IF post.user.userslug -->{config.relative_path}/user/{post.user.userslug}<!-- ELSE -->#<!-- ENDIF post.user.userslug -->">
+			{buildAvatar(post.user, "sm", true, "", "user/picture")} {post.user.username}
+		</a>
+    </div>
+    <small class="pull-right">
+		<span class="timeago" title="{post.timestampISO}"></span>
+	</small>
+</div>
+
+<div>{post.content}</div>
\ No newline at end of file
diff --git a/templates/partials/topic/navigator.tpl b/templates/partials/topic/navigator.tpl
new file mode 100644
index 0000000..39eb042
--- /dev/null
+++ b/templates/partials/topic/navigator.tpl
@@ -0,0 +1,31 @@
+<div class="pagination-block text-center">
+    <div class="progress-bar"></div>
+    <div class="wrapper dropup">
+        <i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
+
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <span class="pagination-text"></span>
+        </a>
+
+        <i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
+        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+            <li>
+                <div class="row">
+                    <div class="col-xs-9 post-content"></div>
+                    <div class="col-xs-3">
+                        <span class="pointer pagetop"><i class="fa fa-angle-double-up"></i> [[topic:first-post]]</span>
+                        <div class="scroller-bg">
+                            <div class="scroller-thumb">
+                                <span class="thumb-text"></span>
+                            </div>
+                        </div>
+                        <span class="pointer pagebottom"><i class="fa fa-angle-double-down"></i> [[topic:last-post]]</span>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <input type="text" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
+            </li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/topic.tpl b/templates/topic.tpl
index abc98a4..108665b 100644
--- a/templates/topic.tpl
+++ b/templates/topic.tpl
@@ -78,20 +78,7 @@
 		<!-- IMPORT partials/paginator.tpl -->
 		<!-- ENDIF config.usePagination -->
 
-		<div class="navigator-thumb text-center hidden">
-			<strong class="text"></strong><br/>
-			<span class="time"></span>
-		</div>
-		<div class="visible-xs visible-sm pagination-block text-center">
-			<div class="progress-bar"></div>
-			<div class="wrapper">
-				<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
-				<i class="fa fa-2x fa-angle-up pointer fa-fw pageup"></i>
-				<span class="pagination-text"></span>
-				<i class="fa fa-2x fa-angle-down pointer fa-fw pagedown"></i>
-				<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
-			</div>
-		</div>
+		<!-- IMPORT partials/topic/navigator.tpl -->
 	</div>
 	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 <!-- IF !widgets.sidebar.length -->hidden<!-- ENDIF !widgets.sidebar.length -->">
 		{{{each widgets.sidebar}}}