diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts
index d0ddc35..8ab078d 100644
--- a/src/components/app-pagination/AppPaginationElement.ts
+++ b/src/components/app-pagination/AppPaginationElement.ts
@@ -10,6 +10,8 @@ class AppPaginationElement extends BaseComponentElement {
 	@attr rpp: number;
 	@attr totalItems: number;
 	@attr autoInit: string;
+	@attr tableLayout: string = 'transactions-table';
+	initial: boolean = false;
 
 	private customRenderItems: () => TemplateResult;
 	private customRenderItem: (item: any) => TemplateResult;
@@ -69,6 +71,8 @@ class AppPaginationElement extends BaseComponentElement {
 		} catch (err) {
 			this.loader?.stop?.();
 			console.error(err);
+		} finally {
+			this.initial = true;
 		}
 	};
 
@@ -94,20 +98,29 @@ class AppPaginationElement extends BaseComponentElement {
 
 		const renderItem = this.customRenderItem
 			? this.customRenderItem
-			: (item) => html`<tr>
-					<td>${item.description}</td>
-					<td>${item.amount}</td>
+			: (item, iter) => html`<tr>
+					<td class="--left">${iter + 1 + rpp * (page - 1)}</td>
+					<td class="--left">${item.description}</td>
+					<td class="balance-cell --right">
+						<span class="balance ${item.amount > 0 ? '--positive' : '--negative'}">
+							${Number(item.amount).toLocaleString('en-US', {
+								maximumFractionDigits: 2,
+								minimumFractionDigits: 2,
+							})}
+						</span>
+						<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
+					</td>
 			  </tr>`;
 
 		const renderItems = this.customRenderItems
 			? this.customRenderItems
 			: () => {
-					if (this.loader && this.loader.loading) {
-						return html`<circle-loader></circle-loader>`;
+					if (this.loader && this.loader.loading && !this.initial) {
+						return html``;
 					} else {
 						if (items?.length > 0) {
-							return html`<table>
-								${items?.map((item) => renderItem(item))}
+							return html`<table class="${this.tableLayout}">
+								${items?.map((item, iter) => renderItem(item, iter))} ${renderPagination()}
 							</table>`;
 						}
 						return html``;
@@ -118,25 +131,27 @@ class AppPaginationElement extends BaseComponentElement {
 			if (totalItems > items?.length) {
 				const pageRange = Math.ceil(totalItems / rpp);
 				return html`
-					<div>
-						<button
-							class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
-							app-action="click:app-pagination#pageBack"
-						>
-							Prev
-						</button>
-						<button
-							class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
-							app-action="click:app-pagination#pageNext"
-						>
-							Next
-						</button>
+					<div class="paginate">
+						<div class="--footer">
+							<button
+								class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
+								app-action="click:app-pagination#pageBack"
+							>
+								Prev
+							</button>
+							<button
+								class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
+								app-action="click:app-pagination#pageNext"
+							>
+								Next
+							</button>
+						</div>
 					</div>
 				`;
 			}
 		};
 
-		return html`<div>${renderItems()} ${renderPagination()}</div>`;
+		return html`<div class="app-pagination">${renderItems()}</div>`;
 	};
 }
 
diff --git a/src/components/wallet-header/WalletHeaderElement.ts b/src/components/wallet-header/WalletHeaderElement.ts
index 5b0d21f..173311e 100644
--- a/src/components/wallet-header/WalletHeaderElement.ts
+++ b/src/components/wallet-header/WalletHeaderElement.ts
@@ -11,6 +11,7 @@ class WalletHeaderElement extends BaseComponentElement {
 	@attr nextMonth: number;
 	@attr currency: string;
 	@attr custom: string;
+	initial: boolean = false;
 
 	fetchFunc: Function = () => {};
 	constructor() {
@@ -38,20 +39,26 @@ class WalletHeaderElement extends BaseComponentElement {
 		} catch (err) {
 			this.loader?.stop?.();
 			console.error(err);
+		} finally {
+			this.initial = true;
 		}
 	};
 
 	render = (): TemplateResult => {
 		const { currentBalance, currency, lastMonth, nextMonth } = this;
 
-		const renderItem = (header, balance, currency) => html`<div>
-			<div>${header}</div>
-			<div><span>${balance}</span><span>${currency}</span></div>
+		const renderItem = (header, balance, currency) => html`<div class="header-item">
+			<div class="--header">${header}</div>
+			<div class="--content">
+				<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
+					>${Number(balance).toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}</span
+				><span class="--currency">(${currency})</span>
+			</div>
 		</div>`;
 
 		const renderHeader = () => {
-			if (this.loader && this.loader.loading) {
-				return html`<circle-loader></circle-loader>`;
+			if (this.loader && this.loader.loading && !this.initial) {
+				return html``;
 			}
 			return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
 				'Current Balance',
@@ -60,7 +67,7 @@ class WalletHeaderElement extends BaseComponentElement {
 			)}${renderItem('Next Month', nextMonth, currency)}`;
 		};
 
-		return html`<div>${renderHeader()}</div>`;
+		return html`<div class="wallet-header">${renderHeader()}</div>`;
 	};
 }
 
diff --git a/src/pages/transaction-create/TransactionCreateElement.ts b/src/pages/transaction-create/TransactionCreateElement.ts
index c311962..ad1f60d 100644
--- a/src/pages/transaction-create/TransactionCreateElement.ts
+++ b/src/pages/transaction-create/TransactionCreateElement.ts
@@ -65,6 +65,7 @@ class TransactionCreateElement extends BasePageElement {
 
 			if (response?.id) {
 				this.appMain.triggerWalletUpdate();
+				this.appMain.pushToast('success', 'Transaction created successfully!');
 				this.routerService.goTo('/history', {
 					walletId: response.id,
 				});
diff --git a/src/pages/wallet-create/WalletCreateElement.ts b/src/pages/wallet-create/WalletCreateElement.ts
index 6a17537..5a49e34 100644
--- a/src/pages/wallet-create/WalletCreateElement.ts
+++ b/src/pages/wallet-create/WalletCreateElement.ts
@@ -48,6 +48,7 @@ class WalletCreateElement extends BasePageElement {
 
 			if (response?.id) {
 				this.appMain.triggerWalletUpdate();
+				this.appMain.pushToast('success', 'Wallet created successfully!');
 				this.routerService.goTo('/wallet/:walletId', {
 					walletId: response.id,
 				});
diff --git a/src/styles/app-pagination/app-pagination.scss b/src/styles/app-pagination/app-pagination.scss
new file mode 100644
index 0000000..e73372f
--- /dev/null
+++ b/src/styles/app-pagination/app-pagination.scss
@@ -0,0 +1,57 @@
+app-pagination {
+	.app-pagination {
+		table.transactions-table {
+			margin: 0 0 3em 0;
+			padding: 0;
+			width: 100%;
+			background-color: $gray-09;
+			border: 1px solid $gray-09;
+			border-radius: 4px;
+			display: block;
+			tr {
+				background-color: $gray-07;
+				padding: 4px 12px;
+				border-radius: 4px;
+				display: grid;
+				grid-template-columns: auto 1fr auto;
+				margin: 6px 8px;
+				td,
+				th {
+					margin: 0 12px;
+					overflow: hidden; // Or flex might break
+					list-style: none;
+					&.--left {
+						text-align: left;
+					}
+					&.--right {
+						text-align: right;
+					}
+					&.balance-cell {
+						.balance {
+							display: inline;
+							&.--positive {
+								color: $green-01;
+							}
+							&.--negative {
+								color: $red-01;
+							}
+						}
+						.currency {
+							display: inline;
+							color: $gray-10;
+						}
+					}
+				}
+			}
+			.paginate {
+				position: relative;
+				height: 33px;
+				margin-bottom: 7px;
+				.--footer {
+					position: absolute;
+					right: 7px;
+				}
+			}
+		}
+	}
+}
diff --git a/src/styles/app-pagination/index.scss b/src/styles/app-pagination/index.scss
new file mode 100644
index 0000000..28d3af5
--- /dev/null
+++ b/src/styles/app-pagination/index.scss
@@ -0,0 +1 @@
+@import './app-pagination.scss';
diff --git a/src/styles/core/button.scss b/src/styles/core/button.scss
index c9ec446..6199ccb 100644
--- a/src/styles/core/button.scss
+++ b/src/styles/core/button.scss
@@ -1,207 +1,208 @@
 .btn {
-    display: inline-block;
-    padding: 6px 12px;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    user-select: none;
-    background-color: transparent;
-    border: $border-width $border-style transparent;
-    font-size: 14px;
-    font-weight: $font-weight-semibold;
-    border-radius: 0.25em;
-    appearance: none;
-    line-height: 20px;
+	display: inline-block;
+	padding: 6px 12px;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+	user-select: none;
+	background-color: transparent;
+	border: $border-width $border-style transparent;
+	font-size: 14px;
+	font-weight: $font-weight-semibold;
+	border-radius: 0.25em;
+	appearance: none;
+	line-height: 20px;
 
-    &:hover {
-        text-decoration: none;
-        background-repeat: repeat-x;
-    }
+	&:hover {
+		text-decoration: none;
+		background-repeat: repeat-x;
+	}
 
-    &:focus {
-        outline: 0;
-    }
+	&:focus {
+		outline: 0;
+	}
 
-    &:disabled,
-    &.disabled,
-    &[aria-disabled="true"] {
-        cursor: default;
-        background-position: 0 0;
-    }
+	&:disabled,
+	&.disabled,
+	&[aria-disabled='true'] {
+		cursor: default;
+		background-position: 0 0;
+		background-color: $gray-08 !important;
+	}
 
-    &:active,
-    &.selected,
-    &[aria-selected="true"] {
-        background-image: none;
-    }
+	&:active,
+	&.selected,
+	&[aria-selected='true'] {
+		background-image: none;
+	}
 
-    &.btn-squared {
-        border-radius: 0;
-    }
+	&.btn-squared {
+		border-radius: 0;
+	}
 
-    &.btn-rounder {
-        border-radius: 2em;
-    }
+	&.btn-rounder {
+		border-radius: 2em;
+	}
 
-    @each $color, $value in $button-map {
-        &.btn-#{$color} {
-            background-color: nth($value, 1);
-            color: nth($value, 2);
-            &:hover {
-                background-color: darken(nth($value, 1), 10%);
-                color: lighten(nth($value, 2), 5%);
-            }
+	@each $color, $value in $button-map {
+		&.btn-#{$color} {
+			background-color: nth($value, 1);
+			color: nth($value, 2);
+			&:hover {
+				background-color: darken(nth($value, 1), 10%);
+				color: lighten(nth($value, 2), 5%);
+			}
 
-            &-transparent {
-                background: transparent;
-                color: $black;
-                &:hover {
-                    background-color: nth($value, 1);
-                    color: nth($value, 2);
-                }
-            }
-        }
-    }
+			&-transparent {
+				background: transparent;
+				color: $black;
+				&:hover {
+					background-color: nth($value, 1);
+					color: nth($value, 2);
+				}
+			}
+		}
+	}
 
-    &.btn-link {
-        color: $blue-07;
-        text-decoration: none;
+	&.btn-link {
+		color: $blue-07;
+		text-decoration: none;
 
-        &:hover {
-            text-decoration: underline;
-        }
-    }
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 
-    &.btn-sm {
-        padding: 3px 10px;
-        font-size: 12px;
-        line-height: 20px;
-    }
+	&.btn-sm {
+		padding: 3px 10px;
+		font-size: 12px;
+		line-height: 20px;
+	}
 
-    &.btn-lg {
-        padding: 14px 1.25em;
-        font-size: inherit;
-        border-radius: 6px;
-    }
+	&.btn-lg {
+		padding: 14px 1.25em;
+		font-size: inherit;
+		border-radius: 6px;
+	}
 
-    &.btn-block {
-        display: block;
-        width: 100%;
-        text-align: center;
-    }
+	&.btn-block {
+		display: block;
+		width: 100%;
+		text-align: center;
+	}
 }
 
 .btn-icon {
-    display: inline-block;
-    padding: 5px;
-    margin-left: 5px;
-    line-height: 2px;
-    color: gray-04;
-    vertical-align: middle;
-    background: transparent;
-    border: $border-width $border-style transparent;
+	display: inline-block;
+	padding: 5px;
+	margin-left: 5px;
+	line-height: 2px;
+	color: gray-04;
+	vertical-align: middle;
+	background: transparent;
+	border: $border-width $border-style transparent;
 
-    &:hover {
-        color: $blue-01;
-    }
+	&:hover {
+		color: $blue-01;
+	}
 
-    &:disabled,
-    &[aria-disabled="true"] {
-        color: $gray-08;
-        cursor: default;
+	&:disabled,
+	&[aria-disabled='true'] {
+		color: $gray-08;
+		cursor: default;
 
-        &:hover {
-            color: $gray-08;
-        }
-    }
+		&:hover {
+			color: $gray-08;
+		}
+	}
 
-    &-round {
-        text-decoration: none;
-        outline: none;
-        cursor: pointer;
-        background: transparent;
-        border-radius: 100%;
-        overflow: none;
-        text-align: center;
-        padding: 5px;
-        border: $border-width $border-style transparent;
+	&-round {
+		text-decoration: none;
+		outline: none;
+		cursor: pointer;
+		background: transparent;
+		border-radius: 100%;
+		overflow: none;
+		text-align: center;
+		padding: 5px;
+		border: $border-width $border-style transparent;
 
-        span,
-        div {
-            display: inline-block;
-            vertical-align: top;
-        }
+		span,
+		div {
+			display: inline-block;
+			vertical-align: top;
+		}
 
-        @each $color, $value in $button-map {
-            &.btn-#{$color} {
-                background-color: nth($value, 1);
-                color: nth($value, 2);
-                &:hover {
-                    @if ($color == "black") {
-                        background-color: lighten(nth($value, 1), 20%);
-                        color: nth($value, 2);
-                    } @else if ($color == "white") {
-                        background-color: darken(nth($value, 1), 20%);
-                        color: nth($value, 2);
-                    } @else if ($color == "yellow") {
-                        background-color: darken(nth($value, 1), 10%);
-                        color: lighten(nth($value, 2), 5%);
-                    } @else if (str-index($color, "light")) {
-                        background-color: darken(nth($value, 1), 20%);
-                        color: lighten(nth($value, 2), 5%);
-                    } @else {
-                        background-color: darken(nth($value, 1), 10%);
-                        color: invert(nth($value, 2), 90%);
-                    }
-                }
+		@each $color, $value in $button-map {
+			&.btn-#{$color} {
+				background-color: nth($value, 1);
+				color: nth($value, 2);
+				&:hover {
+					@if ($color == 'black') {
+						background-color: lighten(nth($value, 1), 20%);
+						color: nth($value, 2);
+					} @else if ($color == 'white') {
+						background-color: darken(nth($value, 1), 20%);
+						color: nth($value, 2);
+					} @else if ($color == 'yellow') {
+						background-color: darken(nth($value, 1), 10%);
+						color: lighten(nth($value, 2), 5%);
+					} @else if (str-index($color, 'light')) {
+						background-color: darken(nth($value, 1), 20%);
+						color: lighten(nth($value, 2), 5%);
+					} @else {
+						background-color: darken(nth($value, 1), 10%);
+						color: invert(nth($value, 2), 90%);
+					}
+				}
 
-                &-transparent {
-                    background: transparent;
-                    color: $black;
-                    &:hover {
-                        background-color: nth($value, 1);
-                        color: nth($value, 2);
-                    }
-                }
-            }
-        }
-    }
+				&-transparent {
+					background: transparent;
+					color: $black;
+					&:hover {
+						background-color: nth($value, 1);
+						color: nth($value, 2);
+					}
+				}
+			}
+		}
+	}
 }
 
 .hidden-text-expander {
-    display: block;
+	display: block;
 
-    &.inline {
-        position: relative;
-        top: -1px;
-        display: inline-block;
-        margin-left: 5px;
-        line-height: 0;
-    }
+	&.inline {
+		position: relative;
+		top: -1px;
+		display: inline-block;
+		margin-left: 5px;
+		line-height: 0;
+	}
 }
 
 .hidden-text-expander a,
 .ellipsis-expander {
-    display: inline-block;
-    height: 12px;
-    padding: 0 5px 5px;
-    font-size: 12px;
-    font-weight: $font-weight-bold;
-    line-height: 6px;
-    color: $gray-07;
-    text-decoration: none;
-    vertical-align: middle;
-    background: lighten($gray-03, 5%);
-    border: 0;
-    border-radius: 1px;
+	display: inline-block;
+	height: 12px;
+	padding: 0 5px 5px;
+	font-size: 12px;
+	font-weight: $font-weight-bold;
+	line-height: 6px;
+	color: $gray-07;
+	text-decoration: none;
+	vertical-align: middle;
+	background: lighten($gray-03, 5%);
+	border: 0;
+	border-radius: 1px;
 
-    &:hover {
-        text-decoration: none;
-        background-color: darken($gray-03, 4%);
-    }
+	&:hover {
+		text-decoration: none;
+		background-color: darken($gray-03, 4%);
+	}
 
-    &:active {
-        color: $white;
-        background-color: $blue-04;
-    }
+	&:active {
+		color: $white;
+		background-color: $blue-04;
+	}
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index bc71eb4..57daa4c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -11,3 +11,5 @@
 @import './app-dropdown/index.scss';
 @import './input-field/index.scss';
 @import './toast-portal/index.scss';
+@import './wallet-header/index.scss';
+@import './app-pagination/index.scss';
diff --git a/src/styles/toast-portal/toast-portal.scss b/src/styles/toast-portal/toast-portal.scss
index 9860839..6ffc6cd 100644
--- a/src/styles/toast-portal/toast-portal.scss
+++ b/src/styles/toast-portal/toast-portal.scss
@@ -26,7 +26,17 @@ toast-portal {
 					background-color: $gray-07;
 					border: 1px solid $gray-08;
 				}
-				.toast-text {
+				&.--success {
+					background-color: $green-07;
+					border: 1px solid $green-08;
+				}
+				&.--error {
+					background-color: $red-07;
+					border: 1px solid $red-08;
+				}
+				&.--warning {
+					background-color: $yellow-07;
+					border: 1px solid $yellow-08;
 				}
 			}
 		}
diff --git a/src/styles/wallet-header/index.scss b/src/styles/wallet-header/index.scss
new file mode 100644
index 0000000..a3bcfd2
--- /dev/null
+++ b/src/styles/wallet-header/index.scss
@@ -0,0 +1 @@
+@import './wallet-header.scss';
diff --git a/src/styles/wallet-header/wallet-header.scss b/src/styles/wallet-header/wallet-header.scss
new file mode 100644
index 0000000..f361eda
--- /dev/null
+++ b/src/styles/wallet-header/wallet-header.scss
@@ -0,0 +1,44 @@
+wallet-header {
+	.wallet-header {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		justify-items: center;
+		gap: 15px 10px;
+		.header-item {
+			display: inline;
+			grid: 1;
+			width: 250px;
+			height: 132px;
+			background-color: $black;
+			border: 1px solid $black;
+			border-radius: 3px;
+			.--header {
+				margin: 5px auto;
+				width: 100%;
+				text-align: center;
+				text-transform: uppercase;
+				font-size: 20px;
+				color: $gray-04;
+			}
+			.--content {
+				.--balance {
+					display: block;
+					font-size: 30px;
+					text-align: center;
+					margin: 22px 0 4px 0;
+					&.--positive {
+						color: $green-01;
+					}
+					&.--negative {
+						color: $red-01;
+					}
+				}
+				.--currency {
+					display: block;
+					text-align: center;
+					color: $gray-08;
+				}
+			}
+		}
+	}
+}