diff --git a/src/components/controls/Pagination.vue b/src/components/controls/Pagination.vue
index 0c7dd94b5..cf427f437 100644
--- a/src/components/controls/Pagination.vue
+++ b/src/components/controls/Pagination.vue
@@ -1,45 +1,47 @@
 <template>
 	<div class="pagination-wrapper">
-		<div v-if="!canFetchPrevious && !canFetchNext">
+		<div>
 			<b-button-group>
-				<b-button variant="outline-info" size="sm" disabled>
-					<IconArrowLeft />
-				</b-button>
-				<b-button variant="outline-info" size="sm" disabled>
-					<IconArrowRight />
+				<b-button v-if="advance" variant="outline-info" size="sm" @click="goFirstPage" :class="{'disabled': isFirstPageDisable}" >
+					{{ getNameByKey('first') }}
 				</b-button>
-			</b-button-group>
-		</div>
-		<ButtonMore v-else-if="!canFetchPrevious" @click="nextPage">{{getNameByKey('more')}}</ButtonMore>
-		<ButtonLess v-else-if="!canFetchNext" @click="previousPage">{{getNameByKey('less')}}</ButtonLess>
-		<div v-else :nextPageAction="nextPageAction" :previousPageAction="previousPageAction">
-			<b-button-group>
-				<b-button variant="outline-info" size="sm" @click="previousPage">
+				<b-button variant="outline-info" size="sm" @click="previousPage" :class="{'disabled': !canFetchPrevious}">
 					<IconArrowLeft />
 				</b-button>
-				<b-button variant="outline-info" size="sm" @click="nextPage">
+
+				<div v-if="advance" class="pageNumberHolder">
+					<input v-model="pageNumber" @keyup.enter="fetchPage" type="number" min="1" :disabled="isDisableInputPage"> {{ displayLastPageNumber }}
+				</div>
+
+				<b-button variant="outline-info" size="sm" @click="nextPage" :class="{'disabled': !canFetchNext}">
 					<IconArrowRight />
 				</b-button>
+
+				<b-button v-if="advance" variant="outline-info" size="sm" @click="goLastPage" :class="{'disabled': isLastPageDisable}">
+					{{ getNameByKey('last') }}
+				</b-button>
 			</b-button-group>
 		</div>
 	</div>
 </template>
 
 <script>
-import ButtonLess from './ButtonLess.vue';
-import ButtonMore from './ButtonMore.vue';
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue';
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue';
 
 export default {
 	components: {
 		IconArrowLeft,
-		IconArrowRight,
-		ButtonLess,
-		ButtonMore
+		IconArrowRight
 	},
 
 	props: {
+		advance: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+
 		canFetchPrevious: {
 			type: Boolean,
 			required: true
@@ -64,6 +66,42 @@ export default {
 			type: Boolean,
 			required: false,
 			default: true
+		},
+
+		lastPageNumber: {
+			type: [Number],
+			required: false,
+			default: undefined
+		},
+
+		currentPageNumber: {
+			type: Number,
+			required: false,
+			default: 1
+		}
+	},
+
+	data() {
+		return {
+			pageNumber: this.currentPageNumber
+		};
+	},
+
+	computed: {
+		isFirstPageDisable() {
+			return this.currentPageNumber === 1;
+		},
+		isLastPageDisable() {
+			return this.currentPageNumber === this.lastPageNumber || this.lastPageNumber === undefined;
+		},
+		isDisableInputPage() {
+			return this.lastPageNumber === undefined;
+		},
+		displayLastPageNumber() {
+			if (this.lastPageNumber !== undefined)
+				return `of ${this.lastPageNumber}`;
+
+			return '';
 		}
 	},
 
@@ -71,6 +109,7 @@ export default {
 		nextPage() {
 			if (this.nextPageAction)
 				this.$store.dispatch(this.nextPageAction);
+
 			this.$emit('next');
 			if (this.goUp)
 				this.goToTop();
@@ -84,6 +123,29 @@ export default {
 				this.goToTop();
 		},
 
+		goFirstPage() {
+			if (!this.isFirstPageDisable) {
+				this.$emit('firstPage');
+				if (this.goUp)
+					this.goToTop();
+			}
+		},
+
+		goLastPage() {
+			if (!this.isLastPageDisable) {
+				this.$emit('lastPage');
+				if (this.goUp)
+					this.goToTop();
+			}
+		},
+
+		fetchPage() {
+			this.$emit('fetchPage', this.pageNumber);
+
+			if (this.goUp)
+				this.goToTop();
+		},
+
 		goToTop() {
 			document.body.scrollTop = 0;
 			document.documentElement.scrollTop = 0;
@@ -92,11 +154,36 @@ export default {
 		getNameByKey(e) {
 			return this.$store.getters['ui/getNameByKey'](e);
 		}
+	},
+
+	watch: {
+		currentPageNumber(value) {
+			this.pageNumber = value;
+		}
 	}
 };
 </script>
 
 <style lang="scss" scoped>
+.pageNumberHolder {
+    padding: 1px 5px;
+
+    input {
+        border: solid 1px var(--clickable-text);
+        color: var(--clickable-text);
+        background-color: transparent;
+        width: 50px;
+        text-align: center;
+    }
+
+    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+}
+
 .disabled {
     cursor: not-allowed;
     color: var(--clickable-text);
@@ -110,6 +197,7 @@ export default {
     float: right;
 
     .btn-outline-info {
+        margin: 0 3px;
         color: var(--clickable-text);
         border-color: var(--clickable-text);
     }
diff --git a/src/components/tables/TableListView.vue b/src/components/tables/TableListView.vue
index 4e878b597..d1ed0fedc 100644
--- a/src/components/tables/TableListView.vue
+++ b/src/components/tables/TableListView.vue
@@ -76,16 +76,19 @@
 				</tbody>
 			</table>
 			<div v-if="pagination || timelinePagination" class="bottom">
-				<div v-if="pagination">{{ pageIndex + 1 }}/{{ getPageNumber(lastPage) }}</div>
-				<div v-else>{{ getPageNumber(timeline.index, timeline.pageNumber) }}/ {{ getPageNumber() }}</div>
 				<div class="pagination-wrapper">
 					<Pagination
 						:canFetchPrevious="prevPageExist"
 						:canFetchNext="nextPageExist"
 						:goUp="false"
+						:currentPageNumber="pageNumber"
+						:lastPageNumber="lastPage"
 						class="pagination"
 						@next="nextPage"
 						@previous="prevPage"
+						@firstPage="goFirstPage"
+						@lastPage="goLastPage"
+						@fetchPage="fetchPage($event)"
 					/>
 					<Loading small v-if="paginationLoading" />
 				</div>
@@ -204,7 +207,21 @@ export default {
 			else return this.pageIndex > 0;
 		},
 
+		pageNumber() {
+			if (this.timelinePagination)
+				return this.timeline.pageNumber;
+
+			return this.pageIndex + 1;
+		},
+
 		lastPage() {
+			if (this.timelinePagination) {
+				if (!this.timeline?.totalRecords)
+					return undefined;
+
+				return Math.ceil(this.timeline.totalRecords / this.timeline.pageSize);
+			}
+
 			return Math.ceil(this.data.length / this.pageSize);
 		},
 
@@ -233,11 +250,28 @@ export default {
 			this.$store.dispatch(this.nextPageAction);
 		},
 
+		fetchPage(number) {
+			const pageNumber = parseInt(number) || 1;
+
+			// handle input number over range
+			if (this.lastPage !== undefined) {
+				if (pageNumber > this.lastPage || pageNumber <= 0) {
+					console.error('number out of range');
+					return;
+				}
+			}
+
+			if (this.timelinePagination)
+				return this.timeline.fetchPage({ pageNumber });
+
+			else this.pageIndex = pageNumber;
+		},
+
 		nextPage() {
 			if (this.nextPageExist) {
 				if (this.timelinePagination)
-				// this.$store.dispatch(this.timelineNextAction)
 					this.timeline.fetchNext();
+
 				else this.pageIndex++;
 			}
 		},
@@ -245,19 +279,24 @@ export default {
 		prevPage() {
 			if (this.prevPageExist) {
 				if (this.timelinePagination)
-				// this.$store.dispatch(this.timelinePreviousAction)
 					this.timeline.fetchPrevious();
+
 				else this.pageIndex--;
 			}
 		},
 
-		getPageNumber() {
-			const args = [...arguments];
-			const number = args.find(arg => typeof arg === 'number');
+		goFirstPage() {
+			if (this.timelinePagination)
+				this.fetchPage(1);
+
+			else this.pageIndex = 0;
+		},
+
+		goLastPage() {
+			if (this.timelinePagination)
+				this.fetchPage(this.lastPage);
 
-			return typeof number === 'number'
-				? number
-				: '..';
+			else this.pageIndex = this.lastPage;
 		},
 
 		onRowClick(row) {
diff --git a/src/config/i18n/en-us.json b/src/config/i18n/en-us.json
index d613942af..111ed6742 100644
--- a/src/config/i18n/en-us.json
+++ b/src/config/i18n/en-us.json
@@ -406,5 +406,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }
diff --git a/src/config/i18n/es.json b/src/config/i18n/es.json
index bf28b2233..11c3eaa64 100644
--- a/src/config/i18n/es.json
+++ b/src/config/i18n/es.json
@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "actualidad",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }
diff --git a/src/config/i18n/ja.json b/src/config/i18n/ja.json
index a3f93f9f7..4009e3693 100644
--- a/src/config/i18n/ja.json
+++ b/src/config/i18n/ja.json
@@ -406,5 +406,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch 情報",
     "current": "現在",
+    "reclaimed": "回収",
+    "first": "最初",
+    "last": "最後",
     "mosaicFlags": "フラグ"
 }
diff --git a/src/config/i18n/pt.json b/src/config/i18n/pt.json
index 5832ad3dc..a79ed0d8c 100644
--- a/src/config/i18n/pt.json
+++ b/src/config/i18n/pt.json
@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }
diff --git a/src/config/i18n/ru.json b/src/config/i18n/ru.json
index be7f8a5da..05f68f822 100644
--- a/src/config/i18n/ru.json
+++ b/src/config/i18n/ru.json
@@ -407,5 +407,7 @@
     "epochInfo": "Информация об эпохе",
     "current": "В данный момент",
     "reclaimed": "Возвращенная",
+    "first": "Первая",
+    "last": "Последняя",
     "mosaicFlags": "Флаги"
 }
diff --git a/src/config/i18n/ua.json b/src/config/i18n/ua.json
index c1b3f5e83..1dbbe4ccb 100644
--- a/src/config/i18n/ua.json
+++ b/src/config/i18n/ua.json
@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }
diff --git a/src/config/i18n/zh.json b/src/config/i18n/zh.json
index 53567863b..56180124b 100644
--- a/src/config/i18n/zh.json
+++ b/src/config/i18n/zh.json
@@ -402,5 +402,8 @@
     "epoch": "Epoch",
     "epochInfo": "Epoch Info",
     "current": "Current",
+    "reclaimed": "Reclaimed",
+    "first": "First",
+    "last": "Last",
     "mosaicFlags": "Flags"
 }
diff --git a/src/config/pages/block-detail.json b/src/config/pages/block-detail.json
index 2b2c50f2b..935d4d6b6 100644
--- a/src/config/pages/block-detail.json
+++ b/src/config/pages/block-detail.json
@@ -21,7 +21,8 @@
                     "nextPageAction": "block/nextBlock",
                     "previousPageAction": "block/previousBlock",
                     "canFetchPrevious": true,
-                    "canFetchNext": true
+                    "canFetchNext": true,
+                    "advance": false
                 },
                 "fields": [
                     "version",
diff --git a/src/infrastructure/AccountService.js b/src/infrastructure/AccountService.js
index 80c118b3c..489d0f003 100644
--- a/src/infrastructure/AccountService.js
+++ b/src/infrastructure/AccountService.js
@@ -22,6 +22,7 @@ import http from './http';
 import { Constants } from '../config';
 import { NamespaceService, TransactionService, ChainService, MetadataService, LockService, ReceiptService, MosaicService, BlockService } from '../infrastructure';
 import helper from '../helper';
+import NodeService from './NodeService';
 
 class AccountService {
 	/**
@@ -89,8 +90,11 @@ class AccountService {
 
 		const accountNames = await NamespaceService.getAccountsNames(addresses);
 
+		const { numAccounts } = await NodeService.getStorageInfo();
+
 		return {
 			...accountInfos,
+			totalRecords: numAccounts,
 			data: accountInfos.data.map((account) => ({
 				...account,
 				balance: helper.getNetworkCurrencyBalance(account.mosaics) !== Constants.Message.UNAVAILABLE ? helper.getNetworkCurrencyBalance(account.mosaics) : helper.toNetworkCurrency(0),
diff --git a/src/infrastructure/BlockService.js b/src/infrastructure/BlockService.js
index c6f0d05c5..8d97d7c11 100644
--- a/src/infrastructure/BlockService.js
+++ b/src/infrastructure/BlockService.js
@@ -24,6 +24,7 @@ import { Constants } from '../config';
 import { take, toArray } from 'rxjs/operators';
 import { MerkleTree } from 'merkletreejs';
 import { sha3_256 as sha3256 } from 'js-sha3';
+import NodeService from './NodeService';
 
 class BlockService {
   /**
@@ -133,8 +134,11 @@ class BlockService {
 
   	const accountInfos = await AccountService.getAccounts(signerAddress);
 
+  	const { numBlocks } = await NodeService.getStorageInfo();
+
   	return {
   		...blocks,
+  		totalRecords: numBlocks,
   		data: blocks.data.map(block => {
   			const { supplementalPublicKeys } = accountInfos.find(account => account.address === block.signer);
 
diff --git a/src/infrastructure/TransactionService.js b/src/infrastructure/TransactionService.js
index 355a6dcae..3d06a7017 100644
--- a/src/infrastructure/TransactionService.js
+++ b/src/infrastructure/TransactionService.js
@@ -223,8 +223,12 @@ class TransactionService {
   		blocksHeight.map(height => BlockService.getBlockInfo(height))
   	);
 
+  	// Cap data in 50 pages
+  	const totalRecords = 50 * pageSize;
+
   	return {
   		...transactions,
+  		totalRecords,
   		data: transactions.data.map(({ deadline, ...transaction }) => ({
   			...transaction,
   			age: helper.convertToUTCDate(blockInfos.find(block => block.height === transaction.transactionInfo.height).timestamp),
diff --git a/src/store/manager/Pagination.js b/src/store/manager/Pagination.js
index 6bde1f3a6..d99061356 100644
--- a/src/store/manager/Pagination.js
+++ b/src/store/manager/Pagination.js
@@ -31,6 +31,7 @@ export default class Pagination {
 		this.pageInfo = {
 			pageNumber: pageInfo.pageNumber || 1,
 			pageSize: pageInfo.pageSize || Constants.pageSize,
+			totalRecords: undefined,
 			data: []
 		};
 		this.capturePageInfo();
@@ -79,6 +80,10 @@ export default class Pagination {
 		return this.pageInfo.pageSize;
 	}
 
+	get totalRecords() {
+		return this.pageInfo.totalRecords || undefined;
+	}
+
 	get filterOptions() {
 		return Array.isArray(this.options) ? this.options : [];
 	}
@@ -141,6 +146,14 @@ export default class Pagination {
 		try {
 			const newPageInfo = await this.fetchFunction(this.pageInfo, this.filterValue, this.store);
 
+			// set isLastPage to true
+			// if pageNumber is match with custom data length
+			if (newPageInfo.totalRecords) {
+				const lastPageNumber = Math.ceil(newPageInfo.totalRecords / newPageInfo.pageSize);
+
+				newPageInfo.isLastPage = newPageInfo.pageNumber === lastPageNumber;
+			}
+
 			this.pageInfo = newPageInfo?.data.length
 				? newPageInfo
 				: {
@@ -201,10 +214,11 @@ export default class Pagination {
             typeof pageInfo !== 'undefined'
 		) {
 			this.store.dispatch(this.name, this);
-			if (this.pageInfo === null || typeof this.pageInfo !== 'object') {
+			if (this.pageInfo === null || typeof this.pageInfo === 'object') {
 				for (const key in pageInfo)
 					this.pageInfo[key] = pageInfo[key];
 			}
+
 			await this.fetch();
 		}
 		else